最近流行のパララックス表現を簡単に導入できるJavaScript「skrollr」

by ateliee · 公開済み 2013年3月3日 · 更新済み 2017年7月11日

最近なにかと話題になっているパララックス。

パララックス効果 (parallax scrolling effect)とは視差効果と呼ばれるもので、

Webでの技術は大抵スクロールすると画像や背景をずらして回転・表示されることで奥行を生み出す技法です。

私はYahooの車の宣伝特集ページにて使用されていたのをみて、インパクトを受けました。

百聞は一見に如かず！下記ページをご覧下さい。

スクロールすると中のコンテンツが右から左からと出現してきます。

Flashはもう完全に下火で、今までFlashで作られていたサイトがJavascriptでつくられていますね。

私は主にJavascriptのライブラリはjQueryを使用しておりますが、

今回ご紹介するプラグインもjQueryプラグイン「skrollr」です。

jQueryプラグイン「skrollr」の使い方

ダウンロードURLより「ZIP」をクリックすると最新版が入手できます。

zipファイルを解凍後、「dist/skrollr.min.js」を読み込みます。

[html]

[/html]

呼び出しを定義します。
[javascript]
var s = skrollr.init({});
[/javascript]
これだけです。

あとは要素ごとに属性設定をするだけです。簡単です。

[html]

こんにちわ

[/html]

「data-数値」でスクロール量時点でのCSSを記述します。
今回の場合、6500pxでbottomが100%、9500pxでbottomが0%となります。
上から下に「こんにちわ」が表示される形です。

こういったパララックスを使用するページはプログラム・デザイン両方ができないと、うまく作れないような気がしますね。

海外サイトではかなり見かけますが、最近日本のサイトでもちらほら使用されてきています。

一度試してみてはいかがでしょうか？