テキストや画像でパララックス効果のあるコンテンツを実装するjQueryコード

パララックス効果のあるコンテンツ
を作る為の雛形みたいなコードがあ
ったのでメモ。既に似たようなのは
いろいろあるんですが、div要素を
使って実装していて自由度がありそう
だったので備忘録的に記事にしておき
ます。

昨日訳あって、FAQサイトをさまよってたらたまたま見かけて良さそうだったので勉強用にちょっと拝借しました。

Parallax with jQuery

レイヤーはdiv要素です。赤いボックスはクリックで緑に変わりますが、IE7以下ではz-indexのバグがあるためクリックできません。

スピードや動く範囲だけなら以下のあたりを変えればいいです。

distance = 70;//マウスに対して要素が動く距離
sensitivity = 7;//感度。というか動くスピード

var distHalf = distance / 2;

//親要素を指定したセレクタ
var parW = $('#par').width(),
    parH = $('#par').height();

//実際に動かす子要素
$('.layer').each(function() {
    var layer = $(this);

    pixPos = distance * (layer.index() + 1);
    pixPosHalf = distHalf * (layer.index() + 1);

レイヤーは普通にcssで重ねます。

#par{/*親要素*/
    position:relative;
    /*overflow:hidden;*/
    margin:150px auto;
    width:400px;
    height:200px;
    background:#fff;
}
.layer{/*子要素*/
    position:absolute;
    width:100%;
    height:100%;
    border:1px solid #000;
}
.box{/*孫要素*/
    position:relative;
    width:50px;
    height:50px;
    background:#f00;
    margin:10px;
    padding:5px;
    
    z-index: 2;/*クリック出来る様にする*/
}

少し大袈裟に動かしてみる

フルスクリーンで見たほうがいいかな？→Demo

親要素をbodyに合わせるとかでいろいろ出来そう。暇を見てやってみたいですね。さほど使う用途は無さそうですけどちょっとしたスパイスとしてはありなんじゃないかなと個人的には思います。ただのパララックスならz-indexのバグは気にせず、クロスブラウザで動きますので機会があればポートフォリオかなんかで使ってみようかな。

via:Stack Overflow