Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Nobuyoshi
October 31, 2020

複雑な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

Nobuyoshi

October 31, 2020
Tweet

More Decks by Nobuyoshi

Other Decks in Programming

Transcript

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. フォント!!!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  21. THANK YOU!!!

    View full-size slide