TOP  >  javascript , WebDesign  >  パララックス効果を与えてくれるjQueryプラグイン「7 Useful Parallax jQuery Plugins」
2014年01月02日

パララックス効果を与えてくれるjQueryプラグイン「7 Useful Parallax jQuery Plugins」

2013年のWEBでは大きく活躍していたパララックス効果。視差効果によってもたらされる体験は、今までのWEBとはまた違った感覚を与えてくれました。今回紹介するのはそんなパララックス効果を簡単に利用できるプラグインをまとめたエントリー「7 Useful Parallax jQuery Plugins」です。

1
7 Useful Parallax jQuery Plugins

手前と奥にオブジェクトを設置し、遠近感を持たせて画面に奥行きをもたせるものから、スクロールによって背景と手前のオブジェクトを動かす定番のものまで様々なパララックス効果を得られるjQueryプラグインが紹介されています。今日はその中から気になったものをピックアップして紹介したいと思います。

Skrollr
定番のスクロールで背景と前面オブジェクトで視差効果出すパララックスプラグイン

51-1024x964
 
 
 
 
 
jInvertScroll
横スクロールなパララックスプラグイン

6
 
 
 
 
 
JParallax
こちらは何枚かのレイヤーを重ねて、それぞれの動きを微妙にズラすことで制作されたパララックス。

31-1024x964
 
 
上記の他にもいくつかのパララックスプラグインが公開されていました。パララックスはスライドショーなどと違い、プラグインがあっても、ある程度思い通りのコンテンツに整形していくのに手間や技術が必要ですが、それでも一から書いていくよりもこういったプラグインがあれば大幅に手間は削減できます。パララックスを一度取り入れてみたいという方にはおすすめのエントリーです。

7 Useful Parallax jQuery Plugins

※当サイトのに掲載されている一部画像、スクリ-ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればこちらからご連絡ください。即刻削除いたします。

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

デザインを開発するという視点からデザイン、WEBデザインに役立つ情報をお伝えします。

ご意見、ご感想、連絡事項があればFacebookページよりお願いたします。

※当サイトのに掲載されている一部画像、スクリ-ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればFacebookページからご連絡ください。即刻削除いたします。
※本ブログの「プライバシーポリシー」です。

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに!をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。

【ご注意】「Designworks」の旧ホームページドメインを利用したWEBサイトにご注意ください
Template deisgn by iDEACLOUD inc.
トップに戻る