[JS]パララックス効果でパネルをダイナミックにスライドさせるスクリプト

jQueryを使用して背景にパララックス(視差)効果を持たせ、パネルをダイナミックにスライドさせるチュートリアルをIn The Woodsから紹介します。

デモのキャプチャ

Create a Funky Parallax Background Effect using jQuery
demo

デモではちょっと酔いそうな感じもありますが、右上のナビゲーションからパララックス効果を楽しめます。

実装はパネルもナビゲーションもリスト要素で、パララックス効果を生み出している雲は空divで配置されています。

スクリプトはjQueryとそのプラグイン「jQuery.ScrollTo」が利用されており、ポジションやタイミングを変更することができます。

top of page

Trackback

leave your Comments

※承認制のため、即時には反映されません。
※匿名、通りすがりさんなどへの回答は控えさせていただきます。

top of page

©2011 coliss