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

  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加

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

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

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

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

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

 

【adidas x JFA】 http://adidas.jp/JFA/

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

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

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

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

 

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

→デモはこちら

→ダウンロードはこちらから

 

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

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

<script type="text/javascript" src="script/skrollr.min.js"></script>

呼び出しを定義します。

var s = skrollr.init({});

これだけです。

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

<div class="drop" data-6500="bottom:100%;" data-9500="bottom:0%;">こんにちわ</div>

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

 

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

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

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

You may also like...

コメントを残す

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