背景・レイアウト

http://srobbin.com/jquery-plugins/backstretch/

【BACKSTRETCH】バックの余白に画像をスライド表示するjQueryプラグイン

Lisence: MITライセンス
Tag: jQueryスライダー画像
http://heyadem.github.io/stackgrid/

【stackgrid.adem.js】コンテンツをレンガ状に積み重ねて配置できるスクリプト

Lisence: MITライセンス
Tag: アニメーションタイル状レイアウト
http://riccardoscalco.github.io/textures/

【Textures.js】かわいいパターンのテクスチャがSVGで作成できるjQueryプラグイン

ラインやサークルや八角形や波線などのさまざまなパターンのテクスチャを、画像を使用せずに、SVGで描けるスクリプトです。

Lisence: MITライセンス
Tag: 地図画像背景
http://vegas.jaysalvat.com/

【vegas】ブラウザや要素いっぱいに背景画像やスライドショーをアニメーションで表示するjQueryプラグイン

Lisence: MITライセンス
Tag: アニメーションオーバーレイレイアウト
http://trgraglia.github.io/jquery.horizonScroll.js/demo/index.html

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

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

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

Lisence: GPLライセンス
Tag: スクロールレスポンシブ
http://jillix.github.io/jQuery-sidebar/

【jQuery-sidebar】画面外からスライドインするサイドバー

サイドバーと言っても、上下左右にレイアウトできます。

Lisence: MITライセンス
Tag: スライドイン
Triagonal Roticerod

【triagonal-roticerod】グラデーションな三角形パターンを作成するスクリプト

Lisence: MITライセンス
Tag: グラデーションパターン
Dynamic Timeline

【Dynamic Timeline】綺麗でレスポンシブなタイムラインのUIを作成できるjQueryプラグイン

Lisence: MITライセンス
Tag: タイムラインレスポンシブ時間軸
http://www.joelambert.co.uk/flux/

【Flux Slider】切り替え時のエフェクトにアニメーションを取り入れたjQueryプラグイン

Lisence: MITライセンス
Tag: アニメーション
http://gridster.net/

【gridster】パネルをグリッドに沿って自由にレイアウト配置できるjQurtyプラグイン

Lisence: MITライセンス
Tag: エフェクトレイアウト
http://razorjack.net/quicksand/

【Quicksand】アイテムをソート・フィルタリングするjQueryプラグイン

Lisence: GPLライセンスMITライセンス
Tag: アニメーションエフェクトフィルター
nested

【Nested】動的なグリッドレイアウトを作成するjQueryプラグイン

Lisence: MITライセンス
Tag: エフェクトレイアウトレスポンシブ
http://isotope.metafizzy.co/index.html

【Isotope】要素にアニメーションを加えるjQueryプラグイン

Lisence: GPLライセンス
Tag: アニメーションレイアウト
particles.js

【particles.js】背景に美しい幾何学状のアニメーションを簡単に実装できるスクリプト

Lisence: MITライセンス
Tag: アニメーション幾何学状
http://sirxemic.github.io/jquery.ripples/

【jquery.ripples】美しい水の波紋を実装できるjQueryプラグイン

Lisence: MITライセンス
Tag: アニメーションエフェクト
http://briangonzalez.github.io/jquery.adaptive-backgrounds.js/

【ADAPTIVE BACKGROUNDS】画像に合った背景色を自動的に設定する

画像の色に近い背景色を自動的に設定します。

Lisence: MITライセンス
Tag:
http://louisremi.github.io/jquery.backgroundSize.js/demo/

【backgroundSize.js】IE8以下でもbackground-sizeプロパティが利用できるjQueryプラグイン

IE8以下でもCSS3のbackground-sizeプロパティが利用できるようになります。

Lisence: MITライセンス
Tag: フルスクリーン
http://soulwire.github.io/fit.js/

【Fit.js】画像などの要素を中央にフィットさせるJSライブラリ

Lisence: WTFPL
Tag: レイアウト
covervid

【CoverVid】背景に動画をフルスクリーンで表示する

フルスクリーンだけでなく、指定したサイズにすることも可能な軽量スクリプト。

Lisence: MITライセンス
Tag: フルスクリーン動画
http://luke.sno.wden.co.uk/full-screen-vertical-scroll

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

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

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

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

【particleground】背景に幾何学模様をパララックスなアニメーションで表示するjQueryプラグイン

デバイスの傾きやマウスの位置でパララックスなアニメーション表示をします。HTML5のCanvasをサポートするすべてのブラウザで動作します。

Lisence: MITライセンス
Tag: パララックス
http://alvarotrigo.com/pagePiling/

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

Lisence: MITライセンス
Tag: スクロール
http://respontent.frebsite.nl/

【Respontent】コンテンツを自動でレスポンシブ化するjQueryプラグイン

画像、テキスト、テーブル、YouTubeやGoogleMapsなどのiframeにも対応。

Lisence: MITライセンス
Tag: レスポンシブ
http://aerolab.github.io/midnight.js/

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

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

Lisence: MITライセンス
Tag: スクロール位置固定
parallax-js

【parallax.js】デバイスの傾きに反応するパララックスを実装するjQueryプラグイン

スマートフォンなどのデバイスの傾きに反応するパララックス効果を実装できるjQueryプラグイン。傾きなどの動きが利用できない場合は代わりにカーソルの位置が利用される。

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

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

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

Lisence: MITライセンス
Tag: スクロールレイアウト

【okvideo】YoutubeやVimeoの動画を背景に表示できるjQueryプラグイン

YoutubeやVimeoの動画を背景に表示できるjQueryプラグインです。

Lisence: MITライセンス
Tag: YouTube動画
http://enricodeleo.github.io/jqlouds/

【jQlouds】ふわふわ漂う雲を背景にできるjQueryプラグイン

雲の形は画像を差し替えることで変更可能です。オプションで雲の数や動かすか等を指定することができます。

Lisence: MITライセンス
Tag: アニメーション
http://vodkabears.github.io/vide/

【Vide】動画を全画面で背景に表示できるjQueryプラグイン

スマートフォンでは代替静止画像が表示されます。

Lisence: MITライセンス
Tag: フルスクリーン動画
http://git.blivesta.com/oblurlay/

【oblurlay】背景をすりガラスのようにぼかすjQueryプラグイン

背景をすりガラスで透かして見たようなエフェクトをかけられます。

Lisence: MITライセンス
Tag: エフェクト
http://apex.yconst.com/freetile-demo/freetile.html

【Freetile】ボックスをタイル状に並べるjQueryプラグイン

ボックスをタイル状に並べるjQueryプラグイン

Lisence: BSDライセンス
Tag: レイアウト
http://mknecht.github.io/gridscrolling.js/

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

縦長のページの途中に横スクロールする水平コンテンツを配置する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://www.aaronvanderzwan.com/maximage/index.php

【Maximage2】画面いっぱいに背景画像を表示するjQueryプラグイン

画面いっぱいに背景画像を表示するjQueryプラグイン。背景をスライドショーにすることもできます。

Lisence: GPLライセンスMITライセンス
Tag: スライダーフルスクリーン
http://bavotasan.com/demos/fullbg/

【Full Size Background Image】画面いっぱいに背景画像を表示するjQueryプラグイン

画面いっぱいに背景画像を表示するjQueryプラグイン。コンテンツに合わせてスクロールするか固定にするかを指定できます。

Lisence: GPLライセンスMITライセンス
Tag: フルスクリーン
http://brm.io/jquery-match-height-demo/

【matchHeight】高さを揃えるだけではなく、グルーピングや列に応じて揃えることもできるjQueryプラグイン

高さを揃えたい要素にclassを設定します。HTML5のdata属性を使って高さを揃えたいパネルをグループ化します。レスポンシブにも対応しています。

Lisence: MITライセンス
Tag: レイアウトレスポンシブ高さを揃える
http://ksylvest.github.io/jquery-gridly/

【jQuery Gridly】ドラッグ&ドロップに対応したグリッドを実装するスクリプト

「jQuery Gridly」はオブジェクトをグリッド上に並べ、ドラッグ&ドロップによるソート、削除機能のUIを提供するjQueryプラグインです。

Lisence: MITライセンス
Tag: レイアウト
http://codepen.io/pederan/full/Hheuy

【Parallax ImageScroll】画像とテキストを交互にパララックス効果で表示するjQueryプラグイン

スクロールすると画像とテキストを交互にパララックス効果で表示します。

Lisence: MITライセンス
Tag: パララックス
ScrollStory

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

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

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

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

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

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

【jQuery.Shapeshift】マウスで要素をドラッグして並び替えることができるjQueryプラグイン

ドラッグ&ドロップで配列しているボックス要素を自動配置してくれます。

Lisence: MITライセンス
Tag: レイアウト
http://leafo.net/sticky-kit/

【Sticky-Kit】スクロールしても固定位置にブロックを表示するjQueryプラグイン

HTMLに一行の記述(idなどを付与するだけ)で設置することができる軽量のスクリプトです。移動範囲を指定したり、複数の要素を対応させることもできます。

Lisence: WTFPL
Tag: 位置固定
http://www.seanmccambridge.com/tubular/

【jQuery tubular】YouTubeの動画をページ背景にフルスクリーン表示するjQueryプラグイン

YouTubeの動画をホームページの背景でフルスクリーンで流すことができます。

Lisence: MITライセンス
Tag: YouTubeフルスクリーン動画
1 / 212

Page Top