Tag Archives: スクロール

http://www.slashie.org/space.js/demo1.html

【Space.js】スクロールでアニメーションがつけられるjQueryプラグイン

Lisence: MITライセンス
Tag: GitHubjQueryアニメーションスクロール
Jquery Pages Scroll Progressbar

【jquery-progressbar】スクロールしている進捗度をプログレスバーで教えてくれるjQueryプラグイン

Lisence: GPLライセンスMITライセンス
Tag: スクロール進捗
http://ignitersworld.com/lab/scrollmenu/

【ScrollMenu.js】スクロールバーとメニューバーが一体となった実用的jQueryプラグイン

Lisence: MITライセンス
Tag: jQueryアニメーションスクロールナビゲーション
http://trgraglia.github.io/jquery.horizonScroll.js/demo/index.html

【jquery.horizonScroll.js】水平スクロールコンテンツを実装できるスクリプト

Lisence: MITライセンス
Tag: スクロール
http://danielrapp.github.io/doppler/

【doppler】手をかざし、そのモーションでページをスクロールさせたりコンテンツをスライドさせるスクリプト

Lisence: MITライセンス
Tag: スクロールモーション
http://demo.paper-leaf.com/alton/standard/

【alton】コンテンツごとに縦スクロールでナビゲートできるjQueryプラグイン

Lisence: GPLライセンス
Tag: スクロールレスポンシブ
http://anthonyly.com/jquery.plugins/scrolline/

【Scrolline.js】スクロール位置をプログレスバーで表示するjQueryプラグイン

スクロール位置を示すプログレスバーがヘッダーに表示されます。

Lisence: MITライセンス
Tag: スクロールプログレスバー
http://ryuk87.github.io/jquery-goup/

【jquery-goup】カスタマイズ豊富!ページトップに戻るボタンを設置できるjQueryプラグイン

Lisence: GPLライセンスMITライセンス
Tag: スクロールページトップに戻る
http://luke.sno.wden.co.uk/full-screen-vertical-scroll

【FSVS】縦長1ページのシンプルなスクロールコンテンツを実装できるjQueryプラグイン

Lisence: MITライセンス
Tag: スクロールタッチデバイス
http://mikefowler.me/crossfade.js/

【crossfade.js】スクロールで画像をクロスフェードで切り替えるjQueryプラグイン

Lisence: MITライセンス
Tag: スクロール
http://totodunet.github.io/endless/

【endless.js】無限スクロールを作るjQueryプラグイン

Lisence: MITライセンス
Tag: スクロール
http://alvarotrigo.com/pagePiling/

【pagePilling.js】縦長スクロールページを作るjQueryプラグイン

Lisence: MITライセンス
Tag: スクロール
http://aerolab.github.io/midnight.js/

【midnight.js】固定ヘッダーをスクロールに合わせて切り替えるjQueryプラグイン

スクロールに合わせて複数のヘッダーデザインを切り替えることができるjQueryプラグイン。

Lisence: MITライセンス
Tag: スクロール位置固定
http://arbitrary-anchor.briangonzalez.org/

【arbitrary-anchor.js】スクロールするページ内リンクをid以外で指定できるjQueryプラグイン

ページ内リンクをidだけでなくclassなどでの指定可能。スクロール速度の変更もできます。

Lisence: MITライセンス
Tag: スクロール
http://www.dominikgorecki.com/p/block-scroll/

【Block Scroll】スクロールでスライドのようにページ送りができるjQueryプラグイン

スクロールでdiv要素ごとにスライドのようなページ送りができるjQueryプラグイン

Lisence: MITライセンス
Tag: スクロールレイアウト
http://lab.victorcoulon.fr/javascript/scrolly/

【scrolly】パララックスなスクロールを実装するjQueryプラグイン

シンプルにパララックス効果を実装できるjQueryプラグイン

Lisence: MITライセンス
Tag: スクロールパララックス
http://alvarotrigo.com/fullPage/

【fullPage.js】1ページコンテンツ用のスクロールjQueryプラグイン

1ページコンテンツ用のスクロールを実装するjQueryプラグイン。垂直、水平にスクロールします。

Lisence: MITライセンス
Tag: スクロール
http://lirancohen.github.io/stickUp/

【stickUp】スクロールでナビゲーションを上部に固定するjQueryプラグイン

スクロールした後、ナビゲーションを上部に固定します。1ページサイト用のナビゲーションとしても使えます。

Lisence: GPLライセンス
Tag: スクロール位置固定
https://github.com/themeskult/jquery-reading-time

【jquery-reading-time】読むのに後何分かかるかを表示するjQueryプラグイン

スクロールに合わせ読むのに後何分かかるかを表示します。

Lisence: MITライセンス
Tag: スクロール
http://projects.lukehaas.me/scrollify/

【Scrollify】縦長ページでちょうどいい位置にスクロールしてくれるjQueryプラグイン

Lisence: MITライセンス
Tag: スクロール
http://mknecht.github.io/gridscrolling.js/

【gridscrolling.js】縦に長いページの途中に水平コンテンツを配置するjQueryプラグイン

縦長のページの途中に横スクロールする水平コンテンツを配置するjQueryプラグイン。キーボードの矢印キーで操作可能。ナビゲーションがあるので今ページのどこを見ているのかわかりやすい。

Lisence: MITライセンス
Tag: スクロールレイアウト
http://epichail.com/endcredits/fim.html

【End Credits】映画のエンドロールのような効果を出すjQueryプラグイン

イメージの配置も可能。映画のスタッフロールのような演出ができます。

Lisence: MITライセンス
Tag: スクロール
http://alvarotrigo.com/multiScroll/

【multiscroll.js】上下から画像がスクロールして合体するページ切り替えが実装できるjQueryプラグイン

Lisence: MITライセンス
Tag: アニメーションスクロール
http://www.infinite-scroll.com/

【Infinite Scroll 】無限スクロールを作るjQueryプラグイン

TwitterやFacebookのような無限スクロールのページが作成できるjQueryプラグイン。

Lisence: MITライセンス
Tag: スクロール
Swift Parallax

【Swift Parallax】要素や背景をスクロールに合わせてアニメーションさせるjQueryプラグイン

スクロールすると、各要素がさまざまな方向・アニメーションで表示されます。デモサイトのように、時間の経過を分かりやすく表示するタイムラインのような表現ができます。

Lisence: MITライセンス
Tag: スクロール
http://experiments.muditameta.com/isInViewport/basic.html

【isInViewport.js】縦長ページに便利!viewport内に入った特定の要素にスタイルが適用できるjQueryプラグイン

指定したdiv要素などの要素までスクロールすると、設定したスタイルが適用されます。jQuery1.7.0以上を使用します。

Lisence: MITライセンス
Tag: スクロール
Tilted Page Scroll

【tiltedpage_scroll】立体的に画像が表示されるスクロールが実装できるjQueryプラグイン

スクロールすると画像が立体的に表示することができます。1ページサイトに少し動きをつけたいときに使いたいですね。

Lisence: GPLライセンス
Tag: アニメーションスクロール
ScrollMagic

【ScrollMagic】スクロールアニメーションを実装する便利なjQueryプラグイン

スクロール系で使用したいエフェクトは一通り揃っているプラグインです。レスポンシブ対応もしています。

Lisence: GPLライセンスMITライセンス
Tag: アニメーションスクロール
http://scrolldepth.parsnip.io/

【Scroll Depth】スクロールを解析できるようにするjQueryプラグイン

ユーザがページをどのくらいスクロールしたか、スクロールして表示されるまでにどのくらいかかったか、などをGoogleAnalyticsで解析できます。

Lisence: GPLライセンスMITライセンス
Tag: スクロール解析
http://slinky.iclanzan.com/

【Slinky】縦長ページに便利!スクロールにより積み重なるヘッダーを作れるjQueryプラグイン

スクロールしていくと、見やすい位置にきたヘッダーのコンテンツが表示されます。現在見ている位置より上のヘッダーは固定されていき、どんな内容があったか確認ができるため、縦長ページに最適です。

Lisence: MITライセンス
Tag: スクロール位置固定
http://jacobheftmann.com/projects/footnoted/#footnote-5

【Footnoted】脚注を入れたい時に役立つjQueryプラグイン

数字をクリックすると下にある補足説明の場所まで自動でスクロールされます。実装もお手軽でspanに囲まれた場所が脚注になります。

Lisence: MITライセンス
Tag: スクロール
http://mynameismatthieu.com/WOW/

【WOW.js】スクロールに合わせてアニメーションさせるスクリプト

スクロールに合わせてアニメーションさせるスクリプト。左右からスライドインしたり、上から降りてきたり、様々な動きを設定することができます。

Lisence: MITライセンス
Tag: アニメーションスクロールスライドイン
ScrollStory

【ScrollStory】1ページサイトのスクロール時にさまざまな動きを設定するjQueryプラグイン

「デモサイト」ボタンのリンク先は基本動作のデモページです。それぞれの動きのデモページは「ダウンロードページ」の【Example Usage】よりご確認ください。

Lisence: MITライセンス
Tag: スクロール
scrollReveal.js

【scrollReveal.js】スクロール時にオブジェクトが流れるようなアニメーションを実装するスクリプト

data-scrollrevealでアニメーションを制御します。JavaScriptやスタイルシートに記述するのではなく、data-scrollrevelにルールに沿った文字列を記述します。

Lisence: MITライセンス
Tag: アニメーションスクロール
http://johnpolacek.github.io/scrolldeck.js/

【scrolldeck】スクロールに応じて様々なエフェクトを実装できるjQueryプラグイン

スクロールに応じてエフェクトを追加するには要素に対しclass等を付けるだけです。  

Lisence: GPLライセンスMITライセンス
Tag: スクロール
http://kana-lier.com/demo/hidenavi/

【hidenavi.js】スクロールで隠れるナビゲーションメニューをつくるjQueryプラグイン

スクロールすると、ナビゲーションメニューがアニメーションしながら隠れ、代わりにメニューの位置を示す要素が表示されます。上にスクロールするとナビゲーションメニューが再表示されます。 特定のライセンス形態はとっていないようで […]

Lisence:
Tag: スクロール
Curtain.js

【curtain.js】スクロールするとカーテンのように切り替わるjQueryプラグイン

スクロールするとカーテンが上がるような動きを実装できます。スクロールだけでなく、キーボードの矢印キーでも動きがスムーズです。

Lisence: MITライセンス
Tag: アニメーションスクロール
http://www.smoothdivscroll.com/

【jQuery Smooth Div Scroll】気持ち良いスクロールをするjQueryプラグイン

ページ内で「するすると」移動する、気持ち良いスクロールを出来るようにするjQueryプラグイン。 スムーススクロールを実装できるものはこれ以外にも色々ありますが、選択肢の一つにいかがでしょうか。

Lisence: GPLライセンス
Tag: スクロール
http://markgoodyear.com/labs/scrollup/

【scrollUp jQuery plugin】ページの先頭へスクロールするjQueryプラグイン

ページの先頭へ戻るボタンを設置できます。どのくらいスクロールしたら表示させるか、表示する時のアニメーション、ページの先頭に戻るスピードなどを指定することができます。デザインのCSSが4パターン用意されています。

Lisence: MITライセンス
Tag: スクロール
http://www.thepetedesign.com/demos/onepage_scroll_demo.html

【One Page Scroll】1ページスクロールを作成するjQueryプラグイン

複数のパネルを垂直方向に配置して1ページのスクロールページを作成できます。

Lisence: GPLライセンス
Tag: スクロール
http://www.ianlunn.co.uk/plugins/jquery-parallax/

【jQuery Parallax】スクロールで格好よく変化するページを作る際に使えるjQueryプラグイン

スクロールによってコンテンツがダイナミックに変化していくのはとても格好よく、スタイリッシュです。

Lisence: GPLライセンスMITライセンス
Tag: アニメーションギャラリースクロールパララックス
http://individual11.github.io/Scroll-To/#ease

【Scroll To】アニメーションスクロールをデフォルト化するjQueryプラグイン

アニメーションスクロールをデフォルト化できるプラグイン。一瞬で飛んでしまうスクロールより便利なので、デフォルト化してしまうのも一つの手かもしれません。 アニメーションの速度やスクロール位置のオフセット、アニメーションエフ […]

Lisence: MITライセンス
Tag: アニメーションスクロール
http://plugins.compzets.com/animatescroll/

【AnimateScroll】面白いページ内スクロールを実装できるjQueryプラグイン

さまざまな動き(エフェクト効果)を指定することが可能です。エフェクトの一覧は下記サイトから確認することができます。Easing function

Lisence: MITライセンス
Tag: エフェクトスクロール
http://www.openstudio.fr/jquery.panorama/

【jQuery simple panorama viewer】シンプルな360度パノラマビューア

パノラマ画像をスクロールして360度表示するjQueryプラグイン。スクロール開始位置、スクロールスピード、スクロール方向(左右のみ)などの調整が可能です。 ※スマートフォンでの閲覧はできますが、ドラッグによる表示位置を […]

Lisence: GPLライセンス
Tag: ギャラリースクロールパノラマ

【jquery Bottom】一番下までスクロールしたら自動的にコンテンツを表示するjQueryプラグイン

Lisence: GPLライセンスMITライセンス
Tag: スクロール

Page Top