Home > デザイン > シングルページで魅せる、縦方向にパララックス効果を表現するjqueryサンプル

シングルページで魅せる、縦方向にパララックス効果を表現するjqueryサンプル

vanillate
2011-10-04 Tue 10:03:47
デザイン

１ページで魅せるポートフォリオサイト風の動きのなかで
最近よく見かけるパララックス効果を採用したデザイン。

今回は縦にスクロールする際に、
スクロールの速度をレイヤーごとに調整して
視覚的に速い部分と遅い部分が起こるようなチュートリアルがありましたので
紹介いたします。

▼One page website, vertical parallax
http://www.webdesignshock.com/one-page-website/

このチュートリアルは、nike better worldというNikeのサイトから
インスピレーションを受けて作成されています。
なので、こちらも見ておくことをおすすめいたします。

デモはこちらから。

大事なのは初期のBOXの定義（ＣＳＳ）と
それぞれのＢＯＸがどんな動きをするのか
（今回だったら特にスクロールスピード）を確認しておくこと。
いまブラウザの位置がどこにあるのか（座標）をデバッグすること。

座標位置はこんな感じのものをどこかに固定して置くと見やすかったです。

Javascript:

HTML:


現在のスクロール位置：

これらを把握すれば、だいたい動きは掴めるのではないでしょうか。

こういったサンプルを最近よくみているのですが
HTMLはシンプルに。
JSファイルも座標指定だけ。
実はCSSでの制御が多いというのがよくわかります。

JSファイルが一番難しいっていう先入観があったので、すこしオドロキでした。

ぜひ、パララックス効果を実験してみてください。

▼One page website, vertical parallax
http://www.webdesignshock.com/one-page-website/
（デモ＆ファイルダウンロードも上記から可能です）

関連記事