【jQuery】パララックスなwebサイトを作れるjQueryプラグイン「jQuery-Parallax」

こんにちは。

最近、ウェブデザイン系のブログやニュースを見ているとパララックスという言葉をよく目にします。パララックスというのは「視差効果」のエフェクトのことで、

複数の画像や文章のスクロール量を個別に変化させることで、奥行きのある立体的なデザインが可能となる、というものです。

そんなパララックスを施したサイトを作るためのjQueryプラグインが「jQuery-Parallax」です。

まずはデモサイトです。

http://www.ianlunn.co.uk/plugins/jquery-parallax/

 

かっこいいですね。以前の nikebetterworld.comをベースにして作成したものだそうです。

内容をみてみると各要素にスクロール速度が設定してあって、特に靴の部分のアニメーションが立体的に見える働きをしています。

サイト訪問者の目を惹きつけ、下のコンテンツをもっと見たくなるような、好奇心を起こさせる働きがありそうです。

 

とういわけで、今回このjQueryプラグインを使ってwebページをひとつ作ってみました。

こちらです。

 

※製作途中ですので、構成が変わる可能性があります。

 

香炉についての新しい使い方を提案したサイトです。香炉は実際にAmazonやPaypal(クレジットカード)で購入できるので、ぜひどうぞ。

更にコンテンツを追加したいのですが、サイト訪問者を飽きさせずに最後まで見てもらうためには、もう少し変化のあるアニメーションが必要かもしれません。

 

ストーリーに沿った内容のwebサイトを作りたいときなんかに適しているのではないでしょうか。

jQuery-Parallax」 チュートリアル http://www.ianlunn.co.uk/blog/code-tutorials/recreate-nikebetterworld-parallax/

 

1

No Comments Yet.

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


40文字以上日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)