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

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

デモのキャプチャ

Create a Funky Parallax Background Effect using jQuery
demo

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

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

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

sponsors

top of page

©2024 coliss