• かちびと.net

    ジャイロセンサーに対応したパララックス(視差効果)のあるコンテンツを実装するスクリプト・parallax.jsのご紹介です。

    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

ジャイロセンサーに対応したパララックス(視差効果)のあるコンテンツを実装するスクリプト・parallax.js

スポンサーリンク

スマフォサイト用のパララックス実装スクリプトがあったので一応メモ。使用は未定ですけど、ちょっと面白かったので覚えておこうと思います。

ジャイロセンサーの値を取得してパララックス効果をスマフォで実装する、というもの。用途は限られそうですけど、使い方次第では面白いコンテンツが作れるかもしれませんね。

parallax.js


PCサイトではマウスの位置で、スマフォでは本体の傾きに応じてパララックス効果を確認出来ます。

$('#foo').parallax();

jQueryまたはZeptで使えるみたいです。

<ul id="foo">
  <li class="layer" data-depth="0.00"><img src="layer6.png"></li>
  <li class="layer" data-depth="0.20"><img src="layer5.png"></li>
  <li class="layer" data-depth="0.40"><img src="layer4.png"></li>
  <li class="layer" data-depth="0.60"><img src="layer3.png"></li>
  <li class="layer" data-depth="0.80"><img src="layer2.png"></li>
  <li class="layer" data-depth="1.00"><img src="layer1.png"></li>
</ul>

マークアップはリストとカスタムデータ属性で実装します。

その他オプションも揃えられています。細かい仕様は以下でご確認下さい。ライセンスはMITです。

parallax.js

URL :
TRB :

Comments & Trackbacks

Comments are closed.

Twitter

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

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

twitter facebook rss contact

Ads

Posts

Contact

Services