Share
Embed
Slide 1
Slide 1 text
No content
Slide 2
Slide 2 text
はじめに
僕が考える現時点でましな方法論について話
すので、よりよい方法を知っている方がい
らっしゃったら教えてください…
Slide 3
Slide 3 text
目次
1. ここでの CSS Animation の定義と魅力
2. CSS Animation で困ること
3. React styled-components の説明
Slide 4
Slide 4 text
1. 定義と魅力
ここでのCSS Animation:
-ローディングアニメーション
-ループアニメーション
を扱います(特に長いアニメーション)
Slide 5
Slide 5 text
1. 定義と魅力
有名なCSS Animation
@yui540さんの作品
https://www.yui540.graphics/
Slide 6
Slide 6 text
1. 定義と魅力
PIXIV TECH FES のサイト
https://conference.pixiv.co.jp/2020/tech-fes
Slide 7
Slide 7 text
2. 困ること
自分で作ってみよう！！！
→
-アイデアが浮かばない
-素材を動かすには絵のスキルが必要
-ソースコードが長くて管理しづらい
Slide 8
Slide 8 text
2. 困ること
ソースコード量がやばい・HTML/CSSの管理が難しい
(minifyなし、@kaito_tateyama / summer warsの9周年記念
非公式サイトより)
Slide 9
Slide 9 text
そこでstyled-components !!!
Slide 10
Slide 10 text
3. styled-components
-CSS in JS を実現できるライブラリ
Slide 11
Slide 11 text
HTMLもJSファイ
ル内で書ける
(JSX: React)
Slide 12
Slide 12 text
3. styled-components
嬉しいこと
-width,heightのJSによる制御(レスポンシブ)
-継承のようなことができる(component)
-JSXによるHTMLの制御
Slide 13
Slide 13 text
作ってみた
- https://uta8a.github.io/ugoku-kawaii/#/ugoku-kawaii/day3
Slide 14
Slide 14 text
styled-componentsでCSS Animationを
はじめよう！
-長めのCSS Animationという分野がある
-styled-componentsでCSS Animationのつらさが
(ある程度)解決できる(CSS in JS, JSX)