傾き×フォントアニメーションの世界

『Vue.js/PWA/BabylonJS…新&定番技術なんでもあり』in表参道 vol.1
で発表した資料。

Variable Fonts（基本　※webフォントとの違い）
https://font-animation.netlify.com/

傾き(スマホで見てね!)
https://font-animation.netlify.com/deviceorientation/

★傾き×フォント(スマホで見てね!)
https://font-animation.netlify.com/combin01/
https://font-animation.netlify.com/combin02/

参考)
Variable Fonts（Decovar）←プロパティが豊富なのでおすすめ！
https://github.com/TypeNetwork/Decovar

Transcript

1. 傾き フォント アニメーションの世界 Masashi Tsuzuki 2019.3.16 楽しむ系なので軽く浅く、楽しみましょう！
2. WHO? https://plus‒d.co.jp/people/masashi̲tsuzuki.html https://twitter.com/masashi̲tsuzuki ぼーだー着てたら高確率で僕です。 勉強会よく出没します。
3. 傾き フォント アニメーション
4. 傾き https://font‒animation.netlify.com/deviceorientation/ スマホで見てね！
5. 傾き(実装) deviceorientationイベントを監視し、傾き（回転）を検知しています。 参考) JavaScript コードレシピ集 https://gihyo.jp/book/2019/978‒4‒297‒10368‒2
6. 傾き フォント アニメーション
7. フォント(Variable Fonts) ・(従来の)Webフォント ・Variable Fonts https://fonts.google.com/specimen/Roboto 1つのファイルで、 様々なバリエーションを持っている。 →例えば、太さによって、複数ファイル取得する必要はなく、 　飛び飛びではなく、間の数値を指定することも可能
8. Variable Fonts https://font‒animation.netlify.com/ 比べて動きの 滑らかさを確認しよう！
9. Variable Fonts（Decovar） https://github.com/TypeNetwork/Decovar 変更可能なバリエーション（太さなど）は各フォントによって違う。今回はDecovarフォントを使いました。
10. Variable Fonts（実装) font‒variation‒settingsプロパティ
11. 対応ブラウザ IE11未対応 https://caniuse.com/#search=font‒variation‒settings
12. 傾き×フォント　組み合わせると https://font‒animation.netlify.com/combin01/ スマホで見てね！ https://font‒animation.netlify.com/combin02/
13. まとめ 技術 × 技術 = ∞(面白いこと)
14. ご清聴ありがとうございました。