昨今では動的かつシンプルなサイトが流行っている傾向にありますよね。
さらに最近多いのがスクロールに合わせて背景やコンテンツ要素が動くアニメーション。
一度は目にしたことがある、もしくは実装したことがあるという方もいらっしゃるのではないでしょうか。
今回はそんなアニメーションの中でもコピペで簡単に実装ができる、スクロールに合わせて動くパララックス・スクロールエフェクトをご紹介させていただきます。
スクロールエフェクトのような要素を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.
