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)

  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
  3. その前に聞きたいんですが、みなさんはcodepen しってますか?

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

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

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

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

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

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

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

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

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

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

  14. フォント!!!

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

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

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

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

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

  21. THANK YOU!!!