エリアの動き
WEB先案内
WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。 その中でも特に勉強になったコードを紹介します。 コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。 あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！
エリアの動き
スクロールに合わせて広い面積が動く「エリアの動き」は、ビジュアル要素を押し出して、コンテンツごとに世界観を変化させたい時に活躍します。
７種類の「エリアの動き」を作ってみた
スクロールすると1画面移動
See the Pen スクロールすると1画面移動 by Web Navigator (@web-navigator) on CodePen.
スクロールすると画面やエリアが時間差で重なる
See the Pen スクロールすると画面やエリアが時間差で重なる by Web Navigator (@web-navigator) on CodePen.
スクロールすると画面分割した左右がそれぞれ動く
See the Pen スクロールすると画面分割した左右がそれぞれ動く by Web Navigator (@web-navigator) on CodePen.
スクロールすると画面分割した右側が動く
See the Pen スクロールすると画面分割した右側が動く by Web Navigator (@web-navigator) on CodePen.
スクロールすると紙芝居風に展開
See the Pen スクロールすると紙芝居風に展開 by Web Navigator (@web-navigator) on CodePen.
スクロールすると下のエリアがヘッダーにかぶさる
See the Pen スクロールすると下のエリアがヘッダーにかぶさる by Web Navigator (@web-navigator) on CodePen.
スクロールするとヘッダー背景画像が拡大
See the Pen スクロールするとヘッダー背景画像が拡大 by Web Navigator (@web-navigator) on CodePen.
パララックスを実装できるプラグイン
上記で紹介した「エリアの動き」はパララックス（視差効果と言います）になります。 この視差効果を生み出すパララックスを実装するプラグインは他にもたくさんあります。 ここではその一例を紹介します。 RELLAX.JS parallax.js SimpleParallax.js ScrollMagic skrollr parlx.js
RELLAX.JS
vanilla JSを使用した4KBの軽量プラグインです。 HTML内の要素に、クラス名と、スピード・重なり順・位置などの属性を指定し動かします。
parallax.js
jQueryに依存しているプラグインです。 背景画像を対象にパララックス効果を適用できます。 HTML内の要素に、クラス名と属性を指定して動かします。
simplePARALLAX.js
vanilla JSを使用したプラグインです。 画像を対象にパララックス効果を適用できます。 imgタグに付与したクラス名を指定して動かします。
ScrollMagic
GSAP、VelocityJSといったフレームワークと連携し、スクロールアクションを実装できるプラグインです。 パララックス以外にも様々なアニメーションを実装できます。
skrollr
jQueryに依存しているプラグインです。 HTML内の要素に、要素の移動や、フェード、色の変化といった属性を指定して動かします。
PARLX.JS
jQueryに依存しているプラグインです。 HTML内の要素に、speed、height、mobileの３種類のオプションや、動きの向きが設定できます。
次回の予定
クリックすると動く「画像リンクの動き」に挑戦してみます ＼＼\\٩( ‘ω’ )و //／／
合わせて読みたい
エリアの動き
ABOUT ME
あなたのお仕事をする時間を使ってITに関することを調べたり、トライしてみたりして、それでもうまくいかない。そんなことはありませんか？
WEB先案内をご利用いただくと、困ったときにITの顧問としてあなたのITに関するお悩みにお答えし、サポートを行うことができます。