0

横スクロールパララックスを表現するjQueryプラグイン「jInvertScroll.js」

jinvertscroll

スクロールすると、横方向に画像が移動しパララックスを表現をしてくれるjQueyプラグインの「jInvertScroll.js」をご紹介します。

 

デモサンプル

1.jInvertScroll一式をダウンロード

jInvertScrollよりデータを一式ダウンロードします。

 

2.jQueryとjInvertScroll.jsを読み込みます。

 

3.画像を3枚用意します。

▼ 一番後ろの画像(cloud.png)2500×500px

cloud

▼中間の画像(build.png)3000×500px

build

▼前面の画像(animal.png)2000×500px

animal

4.HTMLを記述

 

5.CSSを記述

 

6.JavaScriptを記述

 

デモサンプル

 

以上になります。

 




コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > jQuery > 横スクロールパララックスを表現するjQueryプラグイン「jInvertScroll.js」