Amazonサイバーマンデー開催中!12/9まで!

コピペCSSで簡単実装!アニメーションパララックス・スクロールエフェクト8選!スクロールに合わせて動く!【作り方】

昨今では動的かつシンプルなサイトが流行っている傾向にありますよね。

さらに最近多いのがスクロールに合わせて背景やコンテンツ要素が動くアニメーション。

一度は目にしたことがある、もしくは実装したことがあるという方もいらっしゃるのではないでしょうか。

今回はそんなアニメーションの中でもコピペで簡単に実装ができる、スクロールに合わせて動くパララックス・スクロールエフェクトをご紹介させていただきます。

スクロールエフェクトのような要素をWEBデザインに組み込みたいと考えている方、もっと簡単に実装したい!と思っている方は参考にしてみてはいかがでしょうか。

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

See the Pen
CSS scroll-behavior, scroll-snap-type & mix-blend-mode
by Andrej Sharapov (@andrejsharapov)
on CodePen.


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

See the Pen
Scrolling half by half pure #CSS by @Kseso
by Kseso (@Kseso)
on CodePen.


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

See the Pen
[Pure CSS] – One page scroll
by Quentin Veron (@VeronQ)
on CodePen.


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

See the Pen
CSS Scroll Reveal Sections
by Ryan Mulligan (@hexagoncircle)
on CodePen.


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

See the Pen
Codevember 4 :: Sky
by magnificode (@magnificode)
on CodePen.

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

See the Pen
IntersectionObserver demo/test
by David A. (@meodai)
on CodePen.

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

See the Pen
Skew Scrolling Effect ▲
by Dronca Raul (@rauldronca)
on CodePen.

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

See the Pen
simple scroll animation
by Mert Cukuren (@knyttneve)
on CodePen.