上下スクロールに対応したパララックス効果
「skrollr」の特徴
Webサイトの演出手法であるパララックス効果は背景、画像など、
各要素のアニメーション動作に差を付けることで、平面であるサイトを
立体的に見せたり、レイヤー状態であるかのように演出するものです。
ここで紹介する「skrollr」の特徴は、Javascriptで記述することがほとんどない
という点です。中心となる作業は、各タグの「どこから」「どこまで」かを、
指定し、それらに対し、スクロールした際「何をするか」を記述していくことです。
「skrollr」をダウンロードしてHTMLに記述
ダウンロード → https://github.com/Prinzhorn/skrollr
ダウンロードしたファイルを解凍したら、その中の「skrollr.min.js」と
「fixed-positioning.css」をそれぞれの任意のフォルダに格納します。
次に、HTMLファイルを作成し、ヘッダーに「fixed-positioning.css」を読み込みます。
続いて、「skrollr.min.js」を読み込みます。
アニメーションの記述
続いて、アニメーションの記述をしていきます。
アニメーションの指定は対象となる要素の「data」属性により行います。
「data-スクロール位置」の属性に対して、そのスクロール時点での
styleの設置を記述します。「data」属性を複数記述することで、
そのスクロール位置の間で該当するstyleの設定がアニメーションするように
変化するという仕掛けです。
アニメーション指定の注意点
アニメーションの指定は、2地点間を指定したdata属性に対して、
それぞれの時点でのstyleを記述することで行います。
指定できるstyleは「top」「left」「width」「height」「color」「background-color」「transform」「opacitiy」など数値で指定できる項目が含まれます。
これらの値を指定する場合は、同じ項目には必ず同じ単位を用いることが条件となります。例えば、%とpxといった、異なる単位の混在は正しく動作しないので注意してください。
JavaScriptの記述
skrollr.init();
カスタマイズとオプション
skrollrには多くのオプション機能があります
smoothScrolling
詳細:よりアニメーションをスムーズに動かす。
値:true or false デフォルトはtrue
constants
詳細:位置を定数として定義するためのオプション
値:オブジェクト内にプロパティとして定義
forceHeight
詳細:コンテンツが足りていなくてもスクロール位置が指定される位置まではスクロール出来る設定とするか
値:true or false デフォルトtrue
関連記事
-
-
横から出てくるサイドメニュー
Snap.jsをダウンロードして準備 まずはページを左右にスライドしてメニュー表 …
-
-
スマホに効果的なスライドメニューをjqueryの「mmenu.js」で実装する
mmenuでスライドメニューを実装 よく見る横からスライドして出てくるメニューを …
-
-
もっと読み込む機能の実装の備忘録
もっと読み込む機能 自分のサイトにもっと読み込む機能を実装するときのメモです。 …
-
-
クリックで表示・非表示が切り替わるメニューバー
jqueryをHTMLに組み込む 下記のコードをHTMLに記述してjqueryを …
-
-
スクロールしても画面上部に固定されるメニュー
jQeuryを読み込む まずHTMLをマークアップしていきます。 jQueryを …
- PREV
- このサイトについて
- NEXT
- スクロールしても画面上部に固定されるメニュー