• かちびと.net

    シンプルなパララックス効果付きのイメージスライダーを実装するjQueryプラグイン・jQuery Destaqueのご紹介です。視差効果を出せるスライダーです。

    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プラグイン・jQuery Destaque

スポンサーリンク

画像がスライドする際に視差効果
を与える事が出来るjQueryプラグ
インのご紹介。イメージスライダー
とは相性良さそうですね。シンプル
なものですが、応用も出来そうです。

パララックスなイメージスライダーです。画像をスライドさせるとテキストがやや遅れて動きます。

jQuery Destaque


デモが目にやり場に困る写真ですが・・工夫すれば訴求力のあるコンテンツに出来そうです。アニメーションはeasing使ってますです。

$('.foo').each(function(index, el){
    $(this).destaque({
      slideMovement: 100,
      slideSpeed: 1000,
      elementSpeed: 1100,
      easingType: "easeInOutExpo",
      itemSelector: ".piyo",
      itemForegroundElementSelector: ".hoge .huga",
      controlsSelector: "#bar a"
    });
  });

スライドの動きやエレメントの動作はオプションでセッティングします。

未確認ですけどIE7以上でも動作するみたいです。詳しくは以下よりどうぞ。

jQuery Destaque

URL :
TRB :

Ads

Posts

Contact

Services