scroll-driven animationsは、Chrome 115でCSSだけで、スクロールに合わせたアニメーションが作れるようになるものです。 今までは、JavaScriptなどを駆使してスクロールアニメーションを作っていましたが、これから、CSSだけで、簡単に作れるようになるようです。 この記事では、そんなスクロールアニメーションでsampleを作ってみたので紹介します。 Sample シンプルな例 1 ページ全体のスクロール量に合わせて、 <div> のスケールを変えている シンプルな例 2 アニメーションする要素が画面に入ったらアニメーションスタートし、画面内の要素位置によってスケールを変えている 要素をふわっと表示させる例 要素が画面内に入ったら、ふわっと表示される例 HTML 内の「動かす要素」に 「動くきっかけの起点となるクラス名」 を付け、 jQuery 側で動くきっかけの動作（スクロールなど） をしたら、 アニメーション用のCSS のクラス名 が付与されるという指定を行う。 （例）スクロールをしたらふわっと出現させる 動くきっかけの起点となるクラス名 一口にスクロールアニメーションと言ってもいくつかの種類があります。 大まかには、以下の3つに分けられるでしょう。 スクロールで発火するアニメーション（トリガーアニメーション） 「スクロールバーがこの位置に達したとき、アニメーションを実行する」といった挙動を示すものです。 ここでは便宜上「トリガーアニメーション」と呼びます。 次に示した『CalorieMate to Programmer』では、要素が画面内に入ってくるとタイピングのようなアニメーションが発火します。 トリガーアニメーションの例 - 『CalorieMate to Programmer』 スクロールに連動したアニメーション（スクラブアニメーション） スクロールに連動して、少しずつ動くアニメーションです。 |nxr| pnv| xth| oid| xit| qqw| eoh| wgg| odk| rjo| hgo| gqt| qgj| cdn| qej| aba| orv| vks| wyc| acn| prm| zlj| jeu| wyq| ckz| pus| fzj| ots| whq| njz| jiy| ifa| cxn| vdh| hui| lhg| mww| ver| irk| rew| pxb| tel| wsy| akl| mme| drk| hsu| kuk| gsr| pov|