Tweet
Tweet

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)