[JS]奥行きを生み出す『パララックス』を簡単に実装できるスクリプト -Smart3D

複数の画像のスクロールのタイミングをずらして表示するパララックスを簡単に実装できるjQueryのプラグインを紹介します。

jQuery.Smart3D
デモページ

[ad#ad-2]

パララックスはそれぞれのタイミングをずらして視差効果を生み出し、奥行き感を出すものです。
上記デモでは背景と人物の画像2枚をそれぞれマウスに合わせてずらして表示しています。

使用画像

デモに使用している画像（背景）

デモに使用している画像（人物）

デモページでは他にも、画像を5枚使用し、更に奥行きが感じられるものも掲載されています。

5枚の画像を使用したパララックス

Smart3Dの実装

一番最初に紹介したデモの実装方法です。

HTML

各画像をリスト要素で配置します。

<ul id="mindscape">
    <li><img src=".../mindscape1.png" /></li>
    <li><img src=".../mindscape2.png" /></li>
</ul>

CSS

スタイルシートでサイズを設定し、好みでborderなどのデザインを適用します。
ul要素に「overflow: hidden;」を適用するのを忘れずに。

#mindscape {
    width: 720px;
    height: 170px;
    overflow: hidden;
    border:2px solid #444444;
}
#mindscape li{
    width: 844px;
    height: 170px;
}

JavaScript

「jquery.js」と当スクリプトを外部ファイルとし、下記のスクリプトを記述します。

$(function() {
    $('#mindscape').smart3d();
});

[ad#ad-2]