【まとめ】簡単にパララックスサイトが作れるjQueryプラグイン16選

だいぶイマサラ感はありますが、やっぱパララックスサイトはかっこ良いですしまだ需要もあるはずなので、簡単にイケてるパララックスサイトが作れるjQueryプラグインのまとめをさせてください。

イマサラですがまとめておきたいのです。
では早速いきます。

プログラミングやWordPressを習得するのに一番近道な方法とは?

おすすめパララックスjQueryプラグイン18選

Nikebetterworld Parallax Effect

jQuery_Parallax_Plugin_Demo

サイトURL
http://ianlunn.co.uk/articles/recreate-nikebetterworld-parallax/
デモページ
http://ianlunn.co.uk/plugins/jquery-parallax/
使い方参考ページ
parallax.jsをいじってパララックスのデモ作ってみた。 | キリンブログ

ナイキのパララックスデザインに似た感じのデザインが作れるJqueryプラグイン。
元祖パララックスJqueryプラグインと言えばこれ。

 

skrollr

02_skrollr_-_parallax_scrolling_for_the_masses

サイトURL
https://github.com/Prinzhorn/skrollr
デモページ
http://prinzhorn.github.io/skrollr/
使い方参考ページ
パララックスをサクッと作れるskrollr | ASCII.jp

スクロールに合わせてDIV要素などの色が変えられたりします。
他にも動きがたくさんあるのも良い。

 

SUPERSCROLLORAMA

03_SUPERSCROLLORAMA

サイトURL & デモページ
http://johnpolacek.github.io/superscrollorama/
使い方参考ページ
[JS]パララックス、スライドなど、スクロール時のエフェクトをよりスムーズにしたスクリプト -SuperScrollorama | coliss

パララックスでやりたい動きのほとんどが入ってるオススメJqueryプラグイン。

 

Simple Parallax Scroll

06_Parallax_Scrolling_Tutorial

サイトURL & 使い方参考ページ
http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique
デモページ
http://cdn.tutsplus.com/net/uploads/legacy/2138_SimpleParallax/Demo/index.html

シンプルでかっこよいパララックスサイトが作れそう。

 

Parallax scrolling responsive framework

07_Cool_Kitten__A_parallax_scrolling_responsive_framework

GitHubページ
http://jalxob.com/cool-kitten

レスポンシブ対応しているパララックスJqueryプラグイン。
レスポンシブ対応は少ないので貴重な存在。
サイトの雰囲気もかわゆい。

 

jarallax.js

08_Jarallax_-_Parallax_scrolling_javascript_library

サイトURL
http://www.jarallax.com
デモページ
http://www.jarallax.com/demo
使い方参考ページ
簡単パララックス入門。 jarallax.jsの使い方解説 | 株式会社LIG (リグ)

LIGさんも使ってる!?
使い方が簡単なパララックスjQueryプラグイン。

 

Scrolly – Simple jQuery Parallax Plugin

09_Scrolly__a_simple_jQuery_parallax_plugin

サイトURL
http://jquery-plugins.net/scrolly-simple-jquery-parallax-plugin

シンプルでかっこ良いとはまさにこのこと。

 

Create a Parallax Scrolling Website Using Stellar.js

10_Create_a_Parallax_Website_using_Stellar_js

サイトURL & 使い方参考ページ
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.html

Stellar.jsをカスタマイズしたもの。
各スライド毎に分けられており、スライド毎にリンクも付けられてこれはそのまま使えそう。
純粋にかっこ良い。海外企業のキャンペーンページにも良く使用されているよう。

 

Parallax-Scrolling

11_Parallax_Scrolling_Tutorial

サイトURL
https://github.com/richardshepherd/Parallax-Scrolling
使い方参考ページ
Behind The Scenes Of Nike Better World | SMASHING MAGAZINE

かっこ良い!
HTML5動画も標準で入れられるようでキャンペーンページなどにピッタリ。

 

Scrolling Parallax

12_Scrolling_Parallax_Plugin_for_jQuery_-_Multiple_Layered_Parallaxes

サイトURL & 使い方参考ページ
http://jonraasch.com/blog/scrolling-parallax-jquery-plugin
デモページ
http://dev.jonraasch.com/scrolling-parallax/examples/multi-layered-parallax
http://dev.jonraasch.com/scrolling-parallax/examples/bug-parallax
※2個目のデモページはゴキブリが嫌いな人は開かないほうが良いかも。僕はちょっとダメでした。。

ひとつのプラグインで色々な使い方が出来る。

 

jQuery Parallax

13_jquery-parallax_-_WebLinc

サイトURL & 使い方参考ページ
http://www.weblinc.com/labs/jquery-parallax/
デモページ
http://weblinc.github.io/jquery-parallax/vertical.htm

ファミコンみたいなデモページ。
かわいい。
シンプルなパララックスでカスタマイズのしがいがあるかも。

 

StarScroll

14_Starscroll

サイトURL
http://jquery-plugins.net/starscroll-parallax-scrolling-starfield
デモページ
http://bite-software.co.uk/starscroll/

デモがスペースインベーダーみたいでかわいい。
Manualってところを押すと動きますよ。

 

Develop A jQuery Parallax Scrolling Framework

15_jQuery_Parallax_Scrolling_Effects___onlyWebPro_com

サイトURL & 使い方参考ページ
http://www.onlywebpro.com/2013/01/28/develop-a-jquery-parallax-scrolling-framework/
デモページ
http://www.onlywebpro.com/demo/jquery/parallax/parallax.html

シンプル!文章を見せたい時に良いかも。

 

Parallax Scrolling

16_Parallax_Scrolling

サイトURL
http://www.axure.com/forum/tips-tricks-examples/8157-parallax-scrolling.html
デモページ
http://ltmt74.axshare.com/parallax_scrolling.html

横に動くタイプのパララックスjQueryプラグイン。
下にスクロールしながら横に動く。

 

jInvertScroll

17_jInvertScroll_-_A_lightweight_jQuery_horizontal_Parallax_scrolling_plugin

サイトURL & 使い方参考ページ & デモページ
http://www.pixxelfactory.net/jInvertScroll

こちらも横に動くタイプのパララックス。

 

PARALLAX CONTENT SLIDER WITH CSS3 AND JQUERY

18_Parallax_Content_Slider_with_CSS3_and_jQuery

サイトURL & 使い方参考ページ
http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery
デモページ
http://tympanus.net/Development/ParallaxContentSlider/index.html

スライダーにパララックス効果がついている。
ちょっと変わったスライダーにしたい場合にぴったし。

 

オススメ書籍

パララックスみたいにかっこ良い動きをサイトに持たせたい、フロントエンジニアとして基礎からjQueryを勉強したい!と思っている方は下記の書籍がオススメですよ╭( ・ㅂ・)و ̑̑ グッ !

 

まとめ

ほんと色々なプラグインがあるので、どしどし使ってかっこ良いパララックスサイトを作っちゃいましょう。
作成者に感謝です。

もし良かったらフォローとか購読して頂けると嬉しいです!╭( ・ㅂ・)و ̑̑ グッ !

follow us in feedly

Comments: 5

  1. 南川 清文 says:

    ⑨ Create a Parallax Scrolling Website Using Stellar.js について。

    記事内から引用> tellar.jsをカスタマイズしたもの。
    各スライド毎に分けられており、スライド毎にリンクも付けられてこれはそのまま使えそう。

    と、ありますが この場合はどうすればリンク先に飛ぶように出来るのでしょう?
    サイトURL & 使い方参考ページを見てもそれらしき物が見当たらないのでコメントさせて頂きました

    ホームページに使いたいと思っていますが。

    • pei says:

      南川さん

      コメントありがとうございます。
      スライド毎にリンクとありましたが、左上にあるページ内リンクのことを指しておりました。
      表現が分かりづらく申し訳ございません!

      そのままどこかにリンクをつけるとしたら、
      <img class=”envatologo” src=”images/envatologo.png”>

      各スライドの<span class=”slideno”>Slide 3</span>

      <span class=”parallaxbg”>Use the parallax effects on background images too!</span>

      のような部分をaタグで囲むといった感じでしょうか。

  2. 南川 清文 says:

    全ての背景にjpg画像を使い画像リンクタグで処理しましたら



    上手く画面クリックでOKとなりました。

    ありがとうございました。

    • pei says:

      上手くいって良かったです!!

      ホームページが出来たら是非見に行きたいです!

pei へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください