スクロールで動くCSSアニメーション素材

動かしたい要素に class="cs-mo01" を付けるだけで使えます。見出し・文章・画像など、何にでも付けられます。JavaScriptが動かない環境では表示されないので、JSも必ず一緒に貼ってください。

親の .cs-mo02 が画面に入ると、中の .cs-mo02__item が上から順に出てきます。カードはいくつ増やしても、順番の遅れはJSが自動で付けます。

写真は外側から、文章は反対側から入ってきます。左右を入れ替えた段には cs-mo03--rev を付けると、動く向きも逆になります。写真の部分は色の面なので、<img> に差し替えてください。スマホでは縦に並びます。

小さい状態から、少し行き過ぎて戻るように大きくなります。アイコンやバッジ、丸い数字など、小さめの要素に向いています。

ぼやけた状態から、ピントが合うように文字が現れます。字の間隔も少しずつ詰まります。大きなキャッチコピーに向いています。

data-to の数字まで、0から増えていきます。HTMLにも最後の数字を書いておくので、JSが動かなくても正しい数字が表示されます。小数は data-to="4.8" のように書けば、桁をそろえて増えます。

強調したい言葉の下に、手で引いたような線が左から描かれます。線はSVGなので、太さ（stroke-width）や色を自由に変えられます。

色の帯が左から右へ通り過ぎると、その後ろから写真が現れます。写真の部分は色の面なので、.cs-mo08__img を <img class="cs-mo08__img" src="…" alt="…"> に差し替えてください。

CSSの animation-timeline: view() だけで、スクロールに合わせて1つずつ出てきます。上に戻すと逆向きに動きます。この仕組みに対応していないブラウザでは、最初から全部表示されたままになります（見えなくなることはありません）。

スクロールすると、背景の写真だけが文字より遅れて動き、奥行きが出ます。写真は色の面なので、.cs-mo10__bg の background を url(写真.jpg) center / cover に差し替えてください。

画面のいちばん上に細いバーがあり、ページを読み進めるほど右へ伸びます。長い記事やコラムに。固定ヘッダーがあるときは top をヘッダーの高さにしてください。

文字をJSで1文字ずつに分けて、順番に出しています。中には文字だけを書いてください（<br> は使えます）。読み上げソフトには元の文章がそのまま伝わるようにしてあります。