複雑なHTML_CSS アニメーション 作品一覧 + 苦労したこと

複雑なhtml/css アニメーション作品一覧 + 苦労したことについてお話します。
SepakerDeckにアップロードすると、アニメーションできないのできになる方は以下のURLでアクセスしてみてください

また、twitter・codepenなどをやっておりますのでフォローお願いします。

URL
●twitter
https://twitter.com/uemuragame5683

●codepen
https://codepen.io/uemuragame5683/

●時計
https://codepen.io/uemuragame5683/pen/eYNNqgL

●弁当
https://codepen.io/uemuragame5683/pen/QWNZaKd

●MIDI controller
https://codepen.io/uemuragame5683/pen/wvGggYm

●テトリス
https://codepen.io/uemuragame5683/pen/QWNoeQX

●ループステーション
https://codepen.io/uemuragame5683/pen/oNxgyzq

Transcript

1. 複雑なHTML/CSS アニメーション
   作成して苦労したこと
   10 / 31(SAT)
   

   View Slide

2. PROFILE
   うえむー
   twitter: @uemuragame5683
   BLOG：http://nu-blogsite.net/
   職業：フロントエンドエンジニア
   スキル
   html・css・php・javascript・vue.js・jQuery
   gulp・SCSS etc
   学習中
   go・microcms・next.js・BASE etc
   

   View Slide

3. その前に聞きたいんですが、みなさんはcodepen
   しってますか？
   

   View Slide

4. CodePenは、ユーザーが作成したHTML、CSS、
   JavaScriptコードスニペットをテストおよび展示する
   ためのオンラインコミュニティです。
   https://codepen.io/
   

   View Slide

5. 半年以上 html/css アニメーションを
   作成してcodepenに反映しました！
   

   View Slide

6. 　てんじ
   作品
   https://codepen.io/uemuragame56
   83/pen/eYNNqgL
   https://codepen.io/uemuragame5683/pen/QWNZaKd
   

   View Slide

7. 作品
   https://codepen.io/uemuragame5683/pen/wv
   GggYm
   https://codepen.io/uemuragame5683/
   pen/QWNoeQX
   

   View Slide

8. 一番難しかったアニメーション
   作品
   https://codepen.io/uemuragame5683/pen/oNxgyzq
   

   View Slide

9. アニメーションを作成する上で挑戦した事
   

   View Slide

10. HTML / CSS アニメーション
    + レスポンシブ
    

    View Slide

11. DEMO
    https://codepen.io/uemuragame5683/pen/oNxgyzq
    SMP PC
    

    View Slide

12. HTML / CSS アニメーション
    + レスポンシブ
    を作成して苦労した事
    

    View Slide

13. 何が一番苦労したか？
    

    View Slide

14. フォント！！！
    

    View Slide

15. スタイルシートで指定できるフォントサイズには限界がある。
    ブラウザが表示できる最小フォントサイズはだいたい10px
    これ以上縮小できず、レイアウトが崩れてしまう。
    理由
    

    View Slide

16. 対応前・対応後の比較
    対応前の比較 対応後の比較
    

    View Slide

17. 「transform:scale();」
    解消方法
    

    View Slide

18. .sample {
    　font-size:10px
    　-webkit-transform:scale(0.7);
    　-moz-transform:scale(0.7);
    　-ms-transform:scale(0.7);
    　-o-transform:scale(0.7);
    　transform:scale(0.7);
    }
    具体例
    上記の様にフォントサイズを「10px」と指定したうえで
    transform:scale(0.7); と縮小させると、ブラウザでは「7px」で表示さ
    せられます。
    

    View Slide

19. ・ブラウザが表示できる最小フォントサイズはだいたい10px
    ・フォントの極限に縮小させるには「transform:scale();」
    ・やっぱりアニメーションは楽しい！
    まとめ
    

    View Slide

20. codepen
    https://codepen.io/uemuragame5683
    nu-blog
    http://nu-blogsite.net/
    twitter
    https://twitter.com/uemuragame5683
    github
    https://github.com/uemura5683/
    共有事項（フォローお願いします！）
    

    View Slide

21. THANK YOU！！！
    

    View Slide