• かちびと.net

    テキストや画像でパララックス効果のあるコンテンツを実装するjQueryコードのご紹介。たまたま見かけたのでメモ。div要素なのでいろいろ出来そう。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

テキストや画像でパララックス効果のあるコンテンツを実装する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

URL :
TRB :

Comments & Trackbacks (2)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services