2013/12/24
無料のスクロール/パララックススクロール系jQueryプラグイン24
スクロール/パララックススクロールはコンテツをリッチにしてくれる魅力的な演出です。
今回はそんな魅力的な演出であるスクロール/パララックススクロール系のプラグインのうち、海外のブログで数多く紹介されているものを中心にまとめてみました。
ご活用ください。
Scrolld.js
魅力的なフルページスクロールを実装できるプラグイン。
Scrolld.jsDemo
Cool Kitten
レスポンシブWEBデザイン用フレームワークでありながら、パララックススクロールを実装できるフレームワーク。
Cool Kitten
FoldScroll
3D効果でページスクロールできるプラグイン。
FoldScroll
fullPage.js
フルページスクロールを実装できるプラグイン。
fullPage.js
AnimateScroll
30種類以上のページスクロールアニメーションを実装できるプラグイン。
実装する上で参考になる記事:[JS]スクロールに加速やバウンドなど30以上のエフェクトを与え、位置補正もできるスクリプト -AnimateScroll | コリス
AnimateScroll
Parallax.js
上下左右へのパラパラックススクロールを実装できるプラグイン。
Parallaxjs/
Jarallax
シンプルで実装も比較的簡単なプラグイン。
実装する上で参考になるサイト:簡単パララックス入門。 jarallax.jsの使い方解説 | 株式会社LIG
Jarallax.comDemo
jInvertScroll
縦スクロールが横にスクロールしてしまうというおもしろい効果を実装できるプラグイン。
実装する上で参考になる記事:縦スクロールしたのに横にスクロール!?新しいパララックスの見せ方「jInvertScroll」 – Tecuration .com
jInvertScroll
jQuery Full Content
フルページの縦横スクロールが可能なプラグイン。
実装する上で参考になる記事:[JS]ブラウザいっぱいに表示した複数のコンテンツをマトリックス状に切り替えるスクリプト -jQuery.fullContent | コリス
Jquery fullContent.js
One Page Scroll
複数のコンテンツにスクロールエフェクトを実装して、連続して表示できるプラグイン。
実装する上で参考になる記事:[JS]Appleのプロダクトページのような1ページのスクロールコンテンツを作成するスクリプト -One Page Scroll | コリス
One Page Scroll
jQuery Parallax
パララックスサイトを簡単につくれるプラグイン。
実装する上で参考になる記事:5. jQuery でパララックス(視差)を使ったデザイン
jQuery ParallaxDemo
Scroll Path
パスに沿って、ページをスクロールさせられるプラグイン。
jQuery Scroll Path
PageScroller Lite
ページ内スクロールを簡単に実装できるプラグイン。
実装する上で参考になる記事:[JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3 | コリス
PageScroller Lite
jquery-parallax
水平・垂直のパララックススクロールを実装できるプラグイン。
ie6でもテスト済みだそうです。
jquery-parallax
Arbitrary-Anchor
ページ内アンカーをidだけでなくclassや要素にできてしまうプラグイン。
実装する上で参考になる記事:[JS]ページ内アンカーをidだけでなくclassや要素にも指定できるスクリプト -Arbitrary anchors | コリス
jquery.arbitrary-anchor.js
Portfoliojs
レスポンシブ対応の横スクロールイメージスライダー用プラグイン。
Portfoliojs
Scrolling Parallax
複数レイヤーのパララックスを実装できるプラグイン。
Scrolling Parallax Plugin for jQuery
Scrollocue
テキスト行を順番にスクロールして表示するプラグイン。
実装する上で参考になる記事:[JS]着眼点が面白い!スクロールできない状態でキーボードやクリックでスクロールさせるスクリプト -Scrollocue | コリス
Scrollocue
Scrollorama
文字をインパクトのパララックススクロールで演出できるプラグイン。
scrollorama
Scrolly
シンプルなパララックススクロールを実装できるプラグイン。
Scrolly
Skrollr
通常のパララックススクロール以外にも、コミカルな効果も実装できる軽量なプラグイン。
実装する上で参考になる記事:[JS]スクロールを楽しくするパララックスを簡単に実装できる超軽量スクリプト -skrollr | コリス
skrollr
Sly
要素をスライドさせることができるプラグイン。
実装する上で参考になる記事:カスタムスライダーを実装できるjQueryプラグイン「Sly」の使い方 | note | non-standard world, Inc.
Sly
Smint
ナビゲーションを固定したまま、コンテンツスクロールを実装できるプラグイン。
実装する上で参考になる記事:[JS]ナビゲーションを最上部に固定し、各セクションにアニメーションでスクロール移動させるスクリプト -SMINT | コリス
Smint
Super Scrollorama
スクロールすると文字が踊りだす楽しいプラグイン。
SUPERSCROLLORAMA
Sponsored by
お役に立てましたら、以下どれでも結構のですので、ポチリと……。
Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
コピペで完了!12種類のプログレスバーを簡単に導入できるPACE.js
すでに当サイトにも導入してみたのですが、お気づきでしょうか。 PC版で当サイトをご覧いただくと、画
-
Chromeのタブをクリックするだけで音声を消す方法
Google Chromeのタブをクリックするだけで音声を消す方法をご紹介します。 Chromeの
-
Gmailの送信メールを一定期間で自己消滅させる機能拡張「Dmail」
Gmailの送信メールを一定期間で自己消滅させる機能拡張「Dmail」をご紹介します。 Gmail
-
コード/js不要!ドラッグ&ドロップだけでCSSイメージスライダーがつくれるアプリ「cssSlider」
イメージスライダーは限られたスペースに多くの視覚的情報を盛り込めるので、ショップなどでは非常によく利
-
ワンランク上のWEB表現を目指すなら!HTML/CSS/JSの必見テクニック満載「Top Pens of 2013」
CodePenというWEBサービスをご存知でしょうか。 CodePenは、HTML/CSS/Jav
-
ハイクオリティーなのに全部無料!現場で使えるBootstrap3用テンプレート40+
ハイクオリティーなのに全部無料の現場で使えるBootstrap3用テンプレートをまとめました。 ラ
-
レスポンシブ対応済みサイトがApple Watchに対応しているかどうかがわかる「the ultimate responsive test」
Apple Watchがいよいよ発売になります。 ところで、あなたのレスポンシブ対応済みのサイトは
-
背景に使いたい!美しくカラフルなトライアングルメッシュ画像をSVGとして作成できるjsライブラリー「Trianglify」
最近よく見かける背景画像といえば、美しいボケ味の効いた画像やカラフルなピクセルパターンですが、美しく
-
これは簡単!CSSだけで棒グラフ/チャートが作成できてしまう「chart.css」
CSSだけで棒グラフ/チャートが作成できてしまう「chart.css」をご紹介します。 CSSファ
-
CSSアニメーションでここまでできる!無料のCSSアニメーションコードサンプル23
CSSアニメーションだけで、こんなこともできてしまうというコードサンプルをご紹介します。 掲載され