個人的に役立ったデザイン素材や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アソシエイト・プログラムの参加者です。

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

CSSアニメーションを簡単・思いのままに作成できてしまう「Bounce.js」

CSSアニメーションを簡単・思いのままに作成できてしまう「Bounce.js」

最近のサイトではCSSアニメーションを使って、ユーザーに効果的な見せ方をしているサイトも増えてきまし

記事を読む

無料で利用できるhtml5プレイヤー(jQueryプレイヤー)14(2013)

html5のお陰で、プラグインなしでビデオ、音楽を導入できるようになりました。 iPhoneは今後

記事を読む

CSSボタンの参考になる!CSSでつくられたボタンが100以上コレクションされている「CSS Buttons」

CSSボタンのコピペに!CSSでつくられたボタンのコードが100以上コレクションされている「CSS Buttons」

CSSボタンの参考やコピペに使える、とても参考になるCSSボタンのコードがコレクションされているサイ

記事を読む

WEBデベロッパーのためのおすすめYouTubeチャンネル15選

WEBデベロッパーのためのおすすめYouTubeチャンネルをご紹介します。 対象はHTML、CSS

記事を読む

40以上のホバーエフェクトをCSSだけで実装できる「Hover.Css」

40以上のホバーエフェクトをCSSだけで実装できる「Hover.Css」

最近はいろいろなサイトで魅力的なホバーエフェクトを目にする機会が増えました。 今回は、そんなホバー

記事を読む

背景画像をフルスクリーン&レスポンシブ対応にする方法

背景画像をスクリーンいっぱいに表示しているサイトが増えているとはいえ、いま見てもインパクトがあります

記事を読む

HTML5/レスポンシブ/フラットデザインの無料テンプレート50(2013年分)

以前「全部無料!レスポンシブWEBデザイン制作を驀進させるレスポンシブ対応テンプレート121」という

記事を読む

アイコンはCSSで!フォントもSVGも使用しないCSSだけのアイコンセット「Icono」

アイコンはCSSで!フォントもSVGも使用しないCSSだけのアイコンセット「Icono」

CSSだけでつくられたアイコンセットのご紹介です。 近年のアイコンというと、アイコンフォントかSV

記事を読む

Sketch用の無料フリー素材1500+ 2015年04月

Sketch用の無料フリー素材1500+ 2015年04月

Sketch用の無料フリー素材を集めてみました。 Mac専用ということもあり、日本ではPhotos

記事を読む

CSS3を知らなくてもOK!便利すぎるCSS3関連ツール&ジェネレーター51

CSSを入力するときには、細かいプロパティを覚えていないと、作業がなかなかはかどりません。 特に、

記事を読む