こんにちは、工藤です。 今回はパララックス効果を表現できるjQueryプラグイン・スクロールでアニメーションさせるjQueryプラグインについてやそれに関する記事を集めました。 ここ最近はパララックスが１番流行っていた時期の物より、アニメーションの表現がさりげないものが主流なのかなという印象を受けます。
目次
Nikebetterworld Parallax Effect Demo
パララックスのプラグインでも代表的なものの1つ、というイメージです。 スクロールで背景が動く、右にナビゲーションがある…などパララックスに必要な基本的な物が備わっている感じです。
Skrollr
こちらも代表的なものの1つというイメージ。 さまざまなアニメーションを表現することができます。
Cool Kitten
レスポンシブにも対応したプラグインです。 サイトが可愛いです。
Parallax.js
マウスの動きや、スマホやタブレットだったら傾きなどに対応して背景が動きます。 すごい…どういう技術なんでしょう…
scrollpath
パスに沿って画像などが動いてくれます。 デモサイトの右にパスを表示するボタンがあるので、そちらをクリックしていただくとわかりやすいかと思います。
Parallax-JS
表現などはすごくシンプルです。 でもサイトのスクロールすると画像が左右に分かれて動いているのが印象的。
Parallax.js
シンプルに、背景を切り替えるプラグインです。 軽いので機能をあまりつける必要がない場合にいいなと思います。
jInvertScroll
スクロールすると画面が横に動くプラグインです。 なかなかない動きなので印象に残りますね。
Create a Parallax Scrolling Website Using Stellar.js
矢印をクリックするとコンテンツが切り替わっていきます。 サイトのデザインがかっこいいです…。
PARTICLEGROUND
背景の幾何学模様？がスクロールやマウスのに合わせて動きます。 すごくおしゃれで雰囲気を持たせられるなと思います。 もしかしたらパララックスとは少し異なるかもしれないですが調べていて印象に残ったのでご紹介です。
そのほかスクロール時のアニメーション等でお世話になっている記事
- jQueryでパララックスサイトの様にスクロールして要素が出現した時点でアニメーション等のイベント処理を実行させる実験－BlackFlag様
- jQueryのanimateで自由にアニメーションできるようになろう－WEBOPIXEL様
- jQueryのanimateを使ったアニメーション－WEB Drawer様
参考にさせていただいております。ありがとうございます。
それではこのあたりで。
