エリアの動き

WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。

その中でも特に勉強になったコードを紹介します。

コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。

あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！

エリアの動き

スクロールに合わせて広い面積が動く「エリアの動き」は、ビジュアル要素を押し出して、コンテンツごとに世界観を変化させたい時に活躍します。

７種類の「エリアの動き」を作ってみた

スクロールすると1画面移動

スクロールすると画面やエリアが時間差で重なる

スクロールすると画面分割した左右がそれぞれ動く

スクロールすると画面分割した右側が動く

スクロールすると紙芝居風に展開

スクロールすると下のエリアがヘッダーにかぶさる

スクロールするとヘッダー背景画像が拡大

パララックスを実装できるプラグイン

上記で紹介した「エリアの動き」はパララックス（視差効果と言います）になります。

この視差効果を生み出すパララックスを実装するプラグインは他にもたくさんあります。

ここではその一例を紹介します。

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の３種類のオプションや、動きの向きが設定できます。

次回の予定

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

合わせて読みたい

エリアの動き

WEBさん

WordPressの不具合をなおす人

XInstagramYouTubeContact

あなたのお仕事をする時間を使ってITに関することを調べたり、トライしてみたりして、それでもうまくいかない。そんなことはありませんか？ WEB先案内をご利用いただくと、困ったときにITの顧問としてあなたのITに関するお悩みにお答えし、サポートを行うことができます。