Help us understand the problem. What is going on with this article?

コピペCSSで簡単実装!スクロールエフェクト8選の解説

はじめに

以前にスクロールエフェクトってどうやって作ってるのか気になって以下のサイトを見てみた。
コピペCSSで簡単実装!アニメーションパララックス・スクロールエフェクト8選!スクロールに合わせて動く!【作り方】

こちらのページではCodePenにアップされているデザインを紹介していて、そのコードをコピペで簡単に実装できると謳っているが、これに関する仕組みの解説はなかったので、この記事では仕組みを調べついでに知った内容を解説をしていこうと思う。

解説と言っても全体的にはCSSの紹介が主なサラッとした内容なので、詳しい使い方などはぐぐってほしい。
一応関連する内容についてはリファレンスや解説記事のリンクを用意している。

1.メニューボタン連動のシンプルなスクロールエフェクト(cssのみ)

サンプルページ(codepen)

特徴的な動き

各セクションにスクロールがピタッと収まる。

動作の仕組み

scroll-snapというcssを設定することでピタッと止まる動きを実現できる。

  • scroll-snap-type:スクロールスナップを有効にする。親要素で指定
  • scroll-snap-align:スナップする位置を指定する。子要素で指定

2.左右のコンテンツが切り替わるスクロールエフェクト(cssのみ)

サンプルページ(codepen)

特徴的な動き

コンテンツが左右に分かれてせり上がり、画面上部まで達すると止まる。

動作の仕組み

コンテンツの左右出し分けは単純にmarginを指定しているだけ。margin: 0 0 10vh auto;で右寄せになる。
画面上部で固定する方法はposition: sticky;が使われている。
position: sticky;の挙動については解説をしている記事があるためそちらを読むことをおすすめする。

position: sticky;の仕組みや実際の使い方をやさしく解説

3.スライド風ワンページスクロールエフェクト(cssのみ)

サンプルページ(codepen)

特徴的な動き

ラジオボタンを押すと下から画面が迫り上がってくる

動作の仕組み

transitionというcssを使用する。
サンプルページはセクションのtoptransitionでアニメーションさせることで表現している。

  • transition:スタイルが適用された時、シームレスに状態を変化させる

4.切り替わりがスムーズなシンプルスクロールエフェクト(cssのみ)

サンプルページ(codepen)

特徴的な動き

スクロールすると、ページの境界が下から迫り上がってきて、ページが切り替わる

動作の仕組み

position: fixedによる背景の固定とclipによるトリミング。
サンプルページでは各sectionの背景が全て重ねて配置されたような状態になっており、
sectionの枠はスクロールで移動するので、clipによりその範囲内のみをトリミングして表示すると、
背景が固定されたまま、切り口が移動して見える。
サンプルのsectionborderを設定してみるとわかりやすい。

  • clip(非推奨):要素内の指定した範囲を表示する。
  • clip-path(推奨):clipの代わりにこちらを使うことが推奨されている。

5.背景が指定した文字で切り取られるスクロールエフェクト(js使用)

サンプルページ(codepen)

特徴的な動き

文字の形に背景がくりぬいて見える

動作の仕組み

background-clip:textで文字の形に背景をくりぬいている。
chromeではまだ完全対応されていないので-webkit-background-clipも併用するとよい。
また、color: transparent(サンプルでは-webkit-text-fill-color)を指定して文字を透明にしないと背景が見えないので注意。

6.背景色がスクロール時のみ切り替わるスクロールエフェクト(js使用)

サンプルページ(codepen)

特徴的な動き

スクロール時のみ背景がピンクから黄色に変わる

動作の仕組み

画面はdivが大量に敷き詰められており、それらが画面内に入ったときに色を変える処理が仕込まれている。
要素が画面内に入ったことはIntersectionObserverを使用して検知している。
これはscrollイベントで画面内に入ったか検知するより効率が良いとされている。
ゆっくりと色が変わる部分についてはtransitionのシームレス時間を少し長めに設定しているだけ。

7.スクロール時にコンテンツが斜めに動くスクロールエフェクト(js使用)

サンプルページ(codepen)

特徴的な動き

スクロールするとページのコンテンツが傾く

動作の仕組み

傾きはtransformで表現している。
javascriptを使ってtransformを変更し、transitionの指定により傾きがシームレスに切り替わる。
javascriptの画面更新にはrequestAnimationFrameが使用されている。

8.シンプル横スクロールエフェクト(js使用)

サンプルページ(codepen)

特徴的な動き

画面内に入ってきたときキャラクターが表示され、画面外に出るときキャラクターが非表示になる。

動作の仕組み

これは実は今までの解説の要素の組み合わせである。
画面内に入ったとき、出たときで表示、非表示を切り替え、それをtransitionでアニメーションさせているだけである。
ただ、こちらの画面内表示判定はscroll, resizeイベントで作成されている。

最後に

普段ページのデザインなどをしていないとあまり使わないようなものも多かったと思う。
デザインだけでなく機能的に使えるものもあるので、気になったものはぜひより深く調べて見てほしい。

uniquevision
SNSマーケティングツール及びアプリ開発を行う技術会社
https://www.uniquevision.co.jp/company
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした