はじめに
以前にスクロールエフェクトってどうやって作ってるのか気になって以下のサイトを見てみた。
コピペCSSで簡単実装！アニメーションパララックス・スクロールエフェクト8選！スクロールに合わせて動く！【作り方】
こちらのページではCodePenにアップされているデザインを紹介していて、そのコードをコピペで簡単に実装できると謳っているが、これに関する仕組みの解説はなかったので、この記事では仕組みを調べついでに知った内容を解説をしていこうと思う。
解説と言っても全体的にはCSSの紹介が主なサラッとした内容なので、詳しい使い方などはぐぐってほしい。
一応関連する内容についてはリファレンスや解説記事のリンクを用意している。
1.メニューボタン連動のシンプルなスクロールエフェクト(cssのみ)
特徴的な動き
各セクションにスクロールがピタッと収まる。
動作の仕組み
scroll-snapというcssを設定することでピタッと止まる動きを実現できる。
- scroll-snap-type：スクロールスナップを有効にする。親要素で指定
- scroll-snap-align：スナップする位置を指定する。子要素で指定
2.左右のコンテンツが切り替わるスクロールエフェクト(cssのみ)
特徴的な動き
コンテンツが左右に分かれてせり上がり、画面上部まで達すると止まる。
動作の仕組み
コンテンツの左右出し分けは単純にmarginを指定しているだけ。margin: 0 0 10vh auto;で右寄せになる。
画面上部で固定する方法はposition: sticky;が使われている。position: sticky;の挙動については解説をしている記事があるためそちらを読むことをおすすめする。
position: sticky;の仕組みや実際の使い方をやさしく解説
3.スライド風ワンページスクロールエフェクト(cssのみ)
特徴的な動き
ラジオボタンを押すと下から画面が迫り上がってくる
動作の仕組み
transitionというcssを使用する。
サンプルページはセクションのtopをtransitionでアニメーションさせることで表現している。
- transition：スタイルが適用された時、シームレスに状態を変化させる
4.切り替わりがスムーズなシンプルスクロールエフェクト(cssのみ)
特徴的な動き
スクロールすると、ページの境界が下から迫り上がってきて、ページが切り替わる
動作の仕組み
position: fixedによる背景の固定とclipによるトリミング。
サンプルページでは各sectionの背景が全て重ねて配置されたような状態になっており、sectionの枠はスクロールで移動するので、clipによりその範囲内のみをトリミングして表示すると、
背景が固定されたまま、切り口が移動して見える。
サンプルのsectionにborderを設定してみるとわかりやすい。
5.背景が指定した文字で切り取られるスクロールエフェクト(js使用)
特徴的な動き
文字の形に背景がくりぬいて見える
動作の仕組み
background-clip:textで文字の形に背景をくりぬいている。
chromeではまだ完全対応されていないので-webkit-background-clipも併用するとよい。
また、color: transparent(サンプルでは-webkit-text-fill-color)を指定して文字を透明にしないと背景が見えないので注意。
- background-clip：背景を指定した範囲に表示する。
- color：色指定
6.背景色がスクロール時のみ切り替わるスクロールエフェクト(js使用)
特徴的な動き
スクロール時のみ背景がピンクから黄色に変わる
動作の仕組み
画面はdivが大量に敷き詰められており、それらが画面内に入ったときに色を変える処理が仕込まれている。
要素が画面内に入ったことはIntersectionObserverを使用して検知している。
これはscrollイベントで画面内に入ったか検知するより効率が良いとされている。
ゆっくりと色が変わる部分についてはtransitionのシームレス時間を少し長めに設定しているだけ。
- IntersectionObserver(js)：画面内表示検知
7.スクロール時にコンテンツが斜めに動くスクロールエフェクト(js使用)
特徴的な動き
スクロールするとページのコンテンツが傾く
動作の仕組み
傾きはtransformで表現している。
javascriptを使ってtransformを変更し、transitionの指定により傾きがシームレスに切り替わる。
javascriptの画面更新にはrequestAnimationFrameが使用されている。
- transform：要素を変形させる
- requestAnimationFrame(js)
8.シンプル横スクロールエフェクト(js使用)
特徴的な動き
画面内に入ってきたときキャラクターが表示され、画面外に出るときキャラクターが非表示になる。
動作の仕組み
これは実は今までの解説の要素の組み合わせである。
画面内に入ったとき、出たときで表示、非表示を切り替え、それをtransitionでアニメーションさせているだけである。
ただ、こちらの画面内表示判定はscroll, resizeイベントで作成されている。
最後に
普段ページのデザインなどをしていないとあまり使わないようなものも多かったと思う。
デザインだけでなく機能的に使えるものもあるので、気になったものはぜひより深く調べて見てほしい。