【まとめ】簡単にパララックスサイトが作れるjQueryプラグイン16選だいぶイマサラ感はありますが、やっぱパララックスサイトはかっこ良いですしまだ需要もあるはずなので、簡単にイケてるパララックスサイトが作れるjQueryプラグインのまとめをさせてください。イマサラですがまとめておきたいのです。EffectサイトURLhttp://ianlunn.co.uk/articles/recreate-nikebetterworld-parallax/デモページhttp://ianlunn.co.uk/plugins/jquery-parallax/使い方参考ページparallax.jsをいじってパララックスのデモ作ってみた。キリンブログナイキのパララックスデザインに似た感じのデザインが作れるJqueryプラグイン。元祖パララックスJqueryプラグインと言えばこれ。ASCII.jpスクロールに合わせてDIV要素などの色が変えられたりします。他にも動きがたくさんあるのも良い。colissパララックスでやりたい動きのほとんどが入ってるオススメJqueryプラグイン。使い方参考ページhttp://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-techniqueデモページhttp://cdn.tutsplus.com/net/uploads/legacy/2138_SimpleParallax/Demo/index.htmlシンプルでかっこよいパララックスサイトが作れそう。frameworkGitHubページhttp://jalxob.com/cool-kittenレスポンシブ対応しているパララックスJqueryプラグイン。レスポンシブ対応は少ないので貴重な存在。サイトの雰囲気もかわゆい。jarallax.jsサイトURLhttp://www.jarallax.comデモページhttp://www.jarallax.com/demo使い方参考ページ簡単パララックス入門。(リグ)LIGさんも使ってる!?使い方が簡単なパララックスjQueryプラグイン。PluginサイトURLhttp://jquery-plugins.net/scrolly-simple-jquery-parallax-pluginシンプルでかっこ良いとはまさにこのこと。使い方参考ページhttp://webdesign.tutsplus.com/tutorials/complete-websites/create-a-parallax-scrolling-website-using-stellar-js/デモページhttp://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/338_parallax/src/index.htmlStellar.jsをカスタマイズしたもの。各スライド毎に分けられており、スライド毎にリンクも付けられてこれはそのまま使えそう。海外企業のキャンペーンページにも良く使用されているよう。MAGAZINEかっこ良い!HTML5動画も標準で入れられるようでキャンペーンページなどにピッタリ。使い方参考ページhttp://jonraasch.com/blog/scrolling-parallax-jquery-pluginデモページhttp://dev.jonraasch.com/scrolling-parallax/examples/multi-layered-parallaxhttp://dev.jonraasch.com/scrolling-parallax/examples/bug-parallax※2個目のデモページはゴキブリが嫌いな人は開かないほうが良いかも。僕はちょっとダメでした。ひとつのプラグインで色々な使い方が出来る。使い方参考ページhttp://www.weblinc.com/labs/jquery-parallax/デモページhttp://weblinc.github.io/jquery-parallax/vertical.htmファミコンみたいなデモページ。シンプルなパララックスでカスタマイズのしがいがあるかも。StarScrollサイトURLhttp://jquery-plugins.net/starscroll-parallax-scrolling-starfieldデモページhttp://bite-software.co.uk/starscroll/デモがスペースインベーダーみたいでかわいい。Manualってところを押すと動きますよ。使い方参考ページhttp://www.onlywebpro.com/2013/01/28/develop-a-jquery-parallax-scrolling-framework/デモページhttp://www.onlywebpro.com/demo/jquery/parallax/parallax.htmlシンプル!文章を見せたい時に良いかも。ScrollingサイトURLhttp://www.axure.com/forum/tips-tricks-examples/8157-parallax-scrolling.htmlデモページhttp://ltmt74.axshare.com/parallax_scrolling.html横に動くタイプのパララックスjQueryプラグイン。下にスクロールしながら横に動く。デモページhttp://www.pixxelfactory.net/jInvertScrollこちらも横に動くタイプのパララックス。使い方参考ページhttp://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jqueryデモページhttp://tympanus.net/Development/ParallaxContentSlider/index.htmlスライダーにパララックス効果がついている。変わったスライダーにしたい場合にぴったし。Amazon調べ-詳細)KindleAmazon楽天市場Yahooショッピングまとめほんと色々なプラグインがあるので、どしどし使ってかっこ良いパララックスサイトを作っちゃいましょう。