パララックス/スクロールでアニメーションさせるjQueryプラグインなど

  • はてブ

こんにちは、工藤です。 今回はパララックス効果を表現できるjQueryプラグイン・スクロールでアニメーションさせるjQueryプラグインについてやそれに関する記事を集めました。 ここ最近はパララックスが1番流行っていた時期の物より、アニメーションの表現がさりげないものが主流なのかなという印象を受けます。

 

 

Nikebetterworld Parallax Effect Demo

1jQuery-Parallax-Plugin-Demo [配布サイト][DEMO]

パララックスのプラグインでも代表的なものの1つ、というイメージです。 スクロールで背景が動く、右にナビゲーションがある…などパララックスに必要な基本的な物が備わっている感じです。

 

Skrollr

2skrollr---parallax-scrolling-for-the-masses [配布サイト][DEMO]

こちらも代表的なものの1つというイメージ。 さまざまなアニメーションを表現することができます。

 

Cool Kitten

3jQuery-Cool-Kitten-Plugin-Demo [配布サイト][DEMO]

レスポンシブにも対応したプラグインです。 サイトが可愛いです。

 

Parallax.js

4parallax [配布サイト][DEMO]

マウスの動きや、スマホやタブレットだったら傾きなどに対応して背景が動きます。 すごい…どういう技術なんでしょう…


style="display:block"
data-ad-client="ca-pub-4667789978705365"
data-ad-slot="9480048027"
data-ad-format="auto">


scrollpath

5jQuery-Scroll-Path [配布サイト][DEMO]

パスに沿って画像などが動いてくれます。 デモサイトの右にパスを表示するボタンがあるので、そちらをクリックしていただくとわかりやすいかと思います。

 

Parallax-JS

6Parallax-Demo [配布サイト][DEMO]

表現などはすごくシンプルです。 でもサイトのスクロールすると画像が左右に分かれて動いているのが印象的。

 

Parallax.js

7Parallax [配布サイト][DEMO]

シンプルに、背景を切り替えるプラグインです。 軽いので機能をあまりつける必要がない場合にいいなと思います。

 

jInvertScroll

8jInvertScroll---A-lightweight-jQuery-horizontal-Parallax-scrolling-plugin [配布サイト][DEMO]

スクロールすると画面が横に動くプラグインです。 なかなかない動きなので印象に残りますね。

 

Create a Parallax Scrolling Website Using Stellar.js

9Create-a-Parallax-Website-using-Stellar [配布/解説ページ][DEMO]

矢印をクリックするとコンテンツが切り替わっていきます。 サイトのデザインがかっこいいです…。

 

PARTICLEGROUND

10Particleground-demo [配布サイト][DEMO]

背景の幾何学模様?がスクロールやマウスのに合わせて動きます。 すごくおしゃれで雰囲気を持たせられるなと思います。 もしかしたらパララックスとは少し異なるかもしれないですが調べていて印象に残ったのでご紹介です。

 

そのほかスクロール時のアニメーション等でお世話になっている記事

参考にさせていただいております。ありがとうございます。

 


 

それではこのあたりで。

工藤

執筆者: 工藤

日々勉強中です。どうぞよろしくお願いします。

株式会社8bit (エイトビット)

東京都渋谷区でWebサイト制作、Webシステム開発などを行っております。
キャンペーンサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

制作に関するご相談はお気軽にどうぞ

コンペ参加や相談ベースでもご相談承っております。

お問い合わせ