個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

無料のスクロール/パララックススクロール系jQueryプラグイン24

スクロール/パララックススクロールはコンテツをリッチにしてくれる魅力的な演出です。
今回はそんな魅力的な演出であるスクロール/パララックススクロール系のプラグインのうち、海外のブログで数多く紹介されているものを中心にまとめてみました。
ご活用ください。

Scrolld.js

Scrolld.js
魅力的なフルページスクロールを実装できるプラグイン。
Scrolld.jsDemo

Cool Kitten

Cool Kitten
レスポンシブWEBデザイン用フレームワークでありながら、パララックススクロールを実装できるフレームワーク。
Cool Kitten

FoldScroll

FoldScroll
3D効果でページスクロールできるプラグイン。
FoldScroll

fullPage.js

fullPage.js-One-Page-Scroll-Sites-20131127
フルページスクロールを実装できるプラグイン。
fullPage.js

AnimateScroll

AnimateScroll
30種類以上のページスクロールアニメーションを実装できるプラグイン。
実装する上で参考になる記事:[JS]スクロールに加速やバウンドなど30以上のエフェクトを与え、位置補正もできるスクリプト -AnimateScroll | コリス
AnimateScroll

Parallax.js

Parallax
上下左右へのパラパラックススクロールを実装できるプラグイン。
Parallaxjs/

Jarallax

Jarallax
シンプルで実装も比較的簡単なプラグイン。
実装する上で参考になるサイト:簡単パララックス入門。 jarallax.jsの使い方解説 | 株式会社LIG
Jarallax.comDemo

jInvertScroll

jInvertScroll---A-lightweight-jQuery-horizontal-Parallax-scrolling-plugin
縦スクロールが横にスクロールしてしまうというおもしろい効果を実装できるプラグイン。
実装する上で参考になる記事:縦スクロールしたのに横にスクロール!?新しいパララックスの見せ方「jInvertScroll」 – Tecuration .com
jInvertScroll

jQuery Full Content

Jquery-fullContent.js-20131127
フルページの縦横スクロールが可能なプラグイン。
実装する上で参考になる記事:[JS]ブラウザいっぱいに表示した複数のコンテンツをマトリックス状に切り替えるスクリプト -jQuery.fullContent | コリス
Jquery fullContent.js

One Page Scroll

One
複数のコンテンツにスクロールエフェクトを実装して、連続して表示できるプラグイン。
実装する上で参考になる記事:[JS]Appleのプロダクトページのような1ページのスクロールコンテンツを作成するスクリプト -One Page Scroll | コリス
One Page Scroll

jQuery Parallax

jQuery-Parallax-Plugin-Demo-20131127
パララックスサイトを簡単につくれるプラグイン。
実装する上で参考になる記事:5. jQuery でパララックス(視差)を使ったデザイン
jQuery ParallaxDemo

Scroll Path

Scroll-Path
パスに沿って、ページをスクロールさせられるプラグイン。
jQuery Scroll Path

PageScroller Lite

jQuery-Smooth-Scrolling-Plugin-Page-Scroller-20131127
ページ内スクロールを簡単に実装できるプラグイン。
実装する上で参考になる記事:[JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3 | コリス
PageScroller Lite

jquery-parallax

jquery-parallax-WebLinc-20131127
水平・垂直のパララックススクロールを実装できるプラグイン。
ie6でもテスト済みだそうです。
jquery-parallax

Arbitrary-Anchor

jquery.arbitrary-anchor.js-Brian-G.-20131127
ページ内アンカーをidだけでなくclassや要素にできてしまうプラグイン。
実装する上で参考になる記事:[JS]ページ内アンカーをidだけでなくclassや要素にも指定できるスクリプト -Arbitrary anchors | コリス
jquery.arbitrary-anchor.js

Portfoliojs

Portfoliojs-jQuery-plugin-for-your-beautiful-portfolio-images-with-horizontal-scrolling-20131127
レスポンシブ対応の横スクロールイメージスライダー用プラグイン。
Portfoliojs

Scrolling Parallax

Scrolling-Parallax-Plugin-for-jQuery-Multiple-Layered-Parallaxes-20131127
複数レイヤーのパララックスを実装できるプラグイン。
Scrolling Parallax Plugin for jQuery

Scrollocue

Scrollocue
テキスト行を順番にスクロールして表示するプラグイン。
実装する上で参考になる記事:[JS]着眼点が面白い!スクロールできない状態でキーボードやクリックでスクロールさせるスクリプト -Scrollocue | コリス
Scrollocue

Scrollorama

Scrollorama
文字をインパクトのパララックススクロールで演出できるプラグイン。
scrollorama

Scrolly

Scrolly-a-simple-jQuery-parallax-plugin-20131127
シンプルなパララックススクロールを実装できるプラグイン。
Scrolly

Skrollr

skrollr-parallax-scrolling-for-the-masses-20131127
通常のパララックススクロール以外にも、コミカルな効果も実装できる軽量なプラグイン。
実装する上で参考になる記事:[JS]スクロールを楽しくするパララックスを簡単に実装できる超軽量スクリプト -skrollr | コリス
skrollr

Sly

Sly-20131127
要素をスライドさせることができるプラグイン。
実装する上で参考になる記事:カスタムスライダーを実装できるjQueryプラグイン「Sly」の使い方 | note | non-standard world, Inc.
Sly

Smint

Smint
ナビゲーションを固定したまま、コンテンツスクロールを実装できるプラグイン。
実装する上で参考になる記事:[JS]ナビゲーションを最上部に固定し、各セクションにアニメーションでスクロール移動させるスクリプト -SMINT | コリス
Smint

Super Scrollorama

SUPERSCROLLORAMA-20131127
スクロールすると文字が踊りだす楽しいプラグイン。
SUPERSCROLLORAMA

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 29
  • 31

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

無料地図製作ツールの決定版!? 日本をはじめとする世界各国の地図をカスタマイズしてSVG,HTML,PNGで書き出せる「Pixel Map Generator」

無料地図製作ツールの決定版!? 日本をはじめとする世界各国の地図をカスタマイズしてSVG,HTML,PNGで書き出せる「Pixel Map Generator」

無料地図製作ツールの決定版!?ともいえる日本をはじめとする世界各国の地図をカスタマイズしてSVG,H

記事を読む

ファイルを安全にダウンロードするために!ダウロード前にマルウェアをスキャンしてくれるChrome機能拡張「Metascan Online」

ファイルを安全にダウンロード!ダウロード前にマルウェアをスキャンしてくれるChrome機能拡張「Metascan Online」

ファイルを安全にダウンロードするため、ダウロード前にウイルスやスパイウエア、トロイの木馬などのマルウ

記事を読む

信じられないほど美しい!CSSだけで絶滅危惧種30を表現した「In Pieces」

信じられないほど美しい!CSSだけで絶滅危惧種30を表現した「In Pieces」

CSSだけで表現されているのに、信じられないほど美しいサイト「In Pieces」をご紹介します。

記事を読む

プログラミング初心者がプログラミングを学ぶのにベストな海外チュートリアルサイト11

プログラミング初心者がプログラミングを学ぶのにベストな海外チュートリアルサイト11

日本でプログラミングを学ぶなら、ドットインストールが有名ですよね。 海外でもプログラミングを学ぶう

記事を読む

これは便利!背景画像に使えるシームレスパターンを無料でコピー/ダウンロードできる「Transparent Textures」

こりゃ便利!というサービスがあったのでご紹介します。 WEBサイトを制作するときに背景画像などに利

記事を読む

WordPressで格安レンタルサーバーを選ぶなら?エックスサーバーかミニバードがおすすめ!

WordPressにベストな格安レンタルサーバーはこれです!

WordPressでレンタルサーバーを選ぶ場合のおすすめサーバーご紹介します。 新しくWordPr

記事を読む

プロジェクトにすぐ使えるハイクオリティーなHTML/CSS無料テーマテンプレート集100

プロジェクトにすぐ使えるハイクオリティーなHTML/CSS無料テーマテンプレート集100

HTML/CSS無料テーマテンプレートでハイクオリティーなものがありましたのでご紹介します。 これ

記事を読む

UIデザインのリニューアル前と後を比較できるギャラリーサイト「Android UX before and after」

UIデザインのリニューアル前と後を比較できるギャラリーサイト「Android UX before and after」

UIデザインのリニューアルの前と後をひと目で比較できるギャラリーサイトをご紹介します。 Googl

記事を読む

月額約400円でWindowsリモートデスクトップが使えるVirmach:MT4もサクサク

Windowsリモートデスクトップが月額400円のVirmach:MT4もサクサクだ!

普段はMacをメインに使っており、Windowsが必要なときにはBootCampでWindowsを使

記事を読む

今さら聞けない!作業時間を短縮するChrome用ショートカットベスト・コレクション

ブラウザはChromeを使ってます。 そのChromeでサイトを制作したり、ブログを書いたりしてい

記事を読む