ごとーめも

小さな企業のWeb担当が日々起こったことを共有したり、思ったこと、勉強したことを書いていくブログ。普段はRailsやAWSを活用したWeb系の開発をやってます。

スクロール方向と逆に動いてるような背景を持つセクション(パララックス効果)を作るメモ

サイト制作の際にたまに使いたくなるので、メモ

結果はこちら

jqueryのプラグイン「parallax.js」を使ってます
npmやyarnでインストールする際は、jquery-parallax.jsを参照してねとのこと

npm/yarnの参照名からわかるように、jquery依存のライブラリです

ライブラリを読み込んで、data属性を着けるだけで手軽に使えるので、いい感じ
背景画像に暗めのブラーをかけたものを使って、セクション内の文字や画像を明るくして目立たせる用途に使われてるケースが多いのかなと
スクロールと若干変わった動きをするので、目を引きやすい??
CTAに使ったりするといいかもしれない

ではでは〜