WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。
その中でも特に勉強になったコードを紹介します。
コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。
あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください!
エリアの動き
スクロールに合わせて広い面積が動く「エリアの動き」は、ビジュアル要素を押し出して、コンテンツごとに世界観を変化させたい時に活躍します。
7種類の「エリアの動き」を作ってみた
スクロールすると1画面移動
See the Pen
スクロールすると1画面移動 by Web Navigator (@web-navigator)
on CodePen.
「Result」内の表示を確かめてね!↑
スクロールすると画面やエリアが時間差で重なる
See the Pen
スクロールすると画面やエリアが時間差で重なる by Web Navigator (@web-navigator)
on CodePen.
「Result」内の表示を確かめてね!↑
スクロールすると画面分割した左右がそれぞれ動く
See the Pen
スクロールすると画面分割した左右がそれぞれ動く by Web Navigator (@web-navigator)
on CodePen.
「Result」内の表示を確かめてね!↑
スクロールすると画面分割した右側が動く
See the Pen
スクロールすると画面分割した右側が動く by Web Navigator (@web-navigator)
on CodePen.
「Result」内の表示を確かめてね!↑
スクロールすると紙芝居風に展開
See the Pen
スクロールすると紙芝居風に展開 by Web Navigator (@web-navigator)
on CodePen.
「Result」内の表示を確かめてね!↑
スクロールすると下のエリアがヘッダーにかぶさる
See the Pen
スクロールすると下のエリアがヘッダーにかぶさる by Web Navigator (@web-navigator)
on CodePen.
「Result」内の表示を確かめてね!↑
スクロールするとヘッダー背景画像が拡大
See the Pen
スクロールするとヘッダー背景画像が拡大 by Web Navigator (@web-navigator)
on CodePen.
「Result」内の表示を確かめてね!↑
パララックスを実装できるプラグイン
上記で紹介した「エリアの動き」はパララックス(視差効果と言います)になります。
この視差効果を生み出すパララックスを実装するプラグインは他にもたくさんあります。
ここではその一例を紹介します。
- 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の3種類のオプションや、動きの向きが設定できます。

次回の予定
クリックすると動く「画像リンクの動き」に挑戦してみます \\\\٩( ‘ω’ )و ////