サイト開発日記

Just another WordPress site

*

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

   

「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

 - jquery

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

no image
もっと読み込む機能の実装の備忘録

もっと読み込む機能 自分のサイトにもっと読み込む機能を実装するときのメモです。 …

no image
スマホに効果的なスライドメニューをjqueryの「mmenu.js」で実装する

mmenuでスライドメニューを実装 よく見る横からスライドして出てくるメニューを …

no image
横から出てくるサイドメニュー

Snap.jsをダウンロードして準備 まずはページを左右にスライドしてメニュー表 …

no image
クリックで表示・非表示が切り替わるメニューバー

jqueryをHTMLに組み込む 下記のコードをHTMLに記述してjqueryを …

no image
スクロールしても画面上部に固定されるメニュー

jQeuryを読み込む まずHTMLをマークアップしていきます。 jQueryを …