Tag Archives: アニメーション

http://morphext.fyianlai.com/

【Morphext】テキストをアニメーションで表示するjQueryプラグイン

Lisence: MITライセンス
Tag: アニメーション
http://alvarotrigo.com/multiScroll/

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

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

【AniJS】CSS3アニメーションを使ったページが実装できるスクリプト

単独jsで実装することができます。

Lisence: MITライセンス
Tag: アニメーションエフェクト
http://lab.hakim.se/forkit-js/

【forkit.js】GitHub風リボンにアニメーションを加えるスクリプト

カーソルを合わせるとリボンがぶらんとぶら下がります。マウスの動きに追従するアニメーションもついています。単体で動くスクリプトです。

Lisence: MITライセンス
Tag: アニメーション
http://placeholdem.jackrugile.com/

【Placeholdem】フォームのplaceholder属性をアニメーションで表示・非表示にするスクリプト

HTML5以降で<input> 要素と <textarea>要素で使えるようになった placeholder 属性をアニメーション付きで表示・非表示にするスクリプトです。単体で動くスクリプトです。

Lisence: MITライセンス
Tag: アニメーションフォーム
Tilted Page Scroll

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

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

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

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

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

Lisence: GPLライセンスMITライセンス
Tag: アニメーションスクロール
http://demo.tn34.de/jquery-plugins/facets/demo2.html

【Facets】マウスオーバーでアコーディオンのように画像が横に広がるナビゲーションjQueryプラグイン

画像またはグローバルメニューをクリックすると画像がアコーディオンのように開きます。

Lisence: GPLライセンス
Tag: アコーディオンアニメーションスライダー
http://jacksbox.de/stuff/jquery-fractionslider/

【FractionSlider】複数の要素をタイミングをずらしてアニメーションできるjQueryプラグイン

画像やテキストなど複数の要素をタイミングをずらしてアニメーションさせることができるjQueryプラグイン。

Lisence: MITライセンス
Tag: アニメーション
http://darsa.in/motio/

【Motio】CSSスプライトベースのアニメーションを実装できるjQuery

CSSスプライトで配置した画像のFPS値やスピードを簡単にコントロールできます。

Lisence: MITライセンス
Tag: アニメーション
http://wayou.github.io/SlipHover/#doc

【SlipHover】ホバーの方向によってオーバーレイをスライドさせるプラグイン

マウスをホバーした際に、方向に応じてオーバーレイがスライドする方向が変わります。オプションでオーバーレイの高さ・リバースの有無・スクローススピードなど様々変えることができます。

Lisence: MITライセンス
Tag: アニメーション
http://www.kfsoft.info/MyFadeOverImage/demo.php

【MyFadeOverImage】画像はそのままで、カラートーンや不透明度のアニメーションを加えるスクリプト

画像自体をPhotoshopなどでレタッチする必要なく、カラートーンや不透明度の変更をフェードのアニメーションで加えるjQueryのプラグインです。

Lisence:
Tag: アニメーション
http://mynameismatthieu.com/WOW/

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

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

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

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

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

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

【countUp.js】数字のカウントアップをアニメーション表示できるシンプルなライブラリ

開始値、終了値、桁数、アニメーション時間などを指定して実装します。他のライブラリに依存していない、シンプルなライブラリです。

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

【Tooltipster】吹き出しをつけられるjQueryプラグイン

吹き出しが表示される時のエフェクトや、表示位置、表示させるイベント(クリック、マウスオーバーなど)、速度など、いろいろなオプションが設定できます。 ※IE8では吹き出しのCSSの角丸などが反映されません。

Lisence: MITライセンス
Tag: アニメーションエフェクトポップアップ吹き出し
http://www.thepetedesign.com/demos/jquery_super_simple_text_rotator_demo.html

【Super Simple Text Rotator 】テキストをローテーションで差し替えるjQueryプラグイン

クラスを指定して、テキストをローテーションで順番に表示させるjQueryプラグイン。表示が切り替わる時のアニメーション、スピードなどを調整することができます。 ※IEでは、アニメーションの種類によって表示が逆さになったり […]

Lisence: GPLライセンス
Tag: アニメーション
http://tympanus.net/Tutorials/MovingBoxesContent/

【MOVING BOXES CONTENT】滑らかなアニメーションコンテンツのメニューjQueryプラグイン

インパクトあるページに合うメニューだと思います。使用用途が限られてくるかなとは思いますが、忘れられない1ページにはなりそうです。

Lisence: BSDライセンス
Tag: アニメーション
http://tympanus.net/codrops/2011/03/09/animated-content-menu/

【Animated Content Menu with jQuery】滑らかすぎる動きがインパクト大のナビゲーション

全画面画像を変更させるナビゲーションです。ナビゲーションの各ラベルをクリックすると対応したパネルが滑らかなアニメーションとともに展開します。

Lisence: BSDライセンス
Tag: アニメーションエフェクト
http://www.chartjs.org/

【Chart.js】複雑なデータをスタイリッシュなグラフで表示することができるjQueryプラグイン

折れ線グラフ、棒グラフ、円グラフ、レーダーチャートなど、6種類のグラフを描くことができます。

Lisence: MITライセンス
Tag: アニメーションエフェクト
http://jschr.github.io/textillate/

【textillate】多彩なテキストアニメーションが実装できるjQueryプラグイン

CSS3による多彩なテキストアニメーションが実装できるjQueryプラグイン。エフェクトの種類が非常に豊富です。

Lisence: MITライセンス
Tag: アニメーションエフェクト
Curtain.js

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

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

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

【Cycle】1枚の画像を次々と表示するjQueryプラグイン

スタマイズ性の高いプラグインで,動きが自然なトランジション効果を簡単に実装することができます。

Lisence: GPLライセンスMITライセンス
Tag: アニメーション
http://www.justenallan.com/menuslider/

【menuSlider】メニューにスライドする背景やボーダーを設定するjQueryプラグイン

jQueryのメニュースライダー。マウスに追随してボーダーや背景がスライドします。IE8以下は角丸、透明な背景、IE7以下はボックスサイズをサポートしていません。

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

【Flipload.js】HTML要素を水平・垂直方向にくるっとひっくり返すJSスクリプト

HTML要素をくるっとひっくり返すJSスクリプト。 ボタン、フォーム、動画などにも使用でき、水平方向にも垂直方向にも回転します。

Lisence: MITライセンス
Tag: アニメーション
http://alvarotrigo.com/funnyText/

【funnyText.js】垂直・水平方向に文字が移動するアニメーションを実装するjQueryプラグイン

各文字が次々に垂直・水平方向にアニメーションしていきます。アニメーションは、オプションでスピードやフォントサイズ、カラー等を設定することもできます。

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

【animateText.js】テキストを様々なアニメーションで表示するjQueryプラグイン

テキストをスライド、フェードなどの様々なアニメーションで表示します。

Lisence: MITライセンス
Tag: アニメーションエフェクト
http://popcircle.vinmein.com/

【Pop Circle】サークルに沿ってメニューが飛び出すjQueryプラグイン

円に沿ってアニメーションしながら飛び出すメニューを作成できます。メニューの位置調整、アニメーション、スピードなど指定することができます。

Lisence: MITライセンス
Tag: アニメーション
http://kissrobber.appspot.com/circlelist_jquery_plugin/

【CircleList jQuery Plugin】円形リストを作成するjQueryプラグイン

ULで定義したリストを初期化するだけで次のように円形にアニメーションします。各アイテムはドラッグ&ドロップで他の円リストに移動することが出来ます。

Lisence: MITライセンス
Tag: アニメーション
http://jimjh.com/box-lid/

【BoxLid】コンテンツが斜めに傾いてメニューが出現!立体的なメニューを実装するjQueryプラグイン

デモページの左端にマウスをもっていくと、ページ全体がずれてメニューが表示されます。CSS3対応のブラウザで実装が可能です。

Lisence: MITライセンス
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: アニメーションスクロール
2 / 212

Page Top