上下スクロールに対応したパララックス効果

「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