カーソルを合わせるとリボンがぶらんとぶら下がります。マウスの動きに追従するアニメーションもついています。単体で動くスクリプトです。
HTML5以降で<input> 要素と <textarea>要素で使えるようになった placeholder 属性をアニメーション付きで表示・非表示にするスクリプトです。単体で動くスクリプトです。
スクロールすると画像が立体的に表示することができます。1ページサイトに少し動きをつけたいときに使いたいですね。
スクロール系で使用したいエフェクトは一通り揃っているプラグインです。レスポンシブ対応もしています。
画像またはグローバルメニューをクリックすると画像がアコーディオンのように開きます。
画像やテキストなど複数の要素をタイミングをずらしてアニメーションさせることができるjQueryプラグイン。
CSSスプライトで配置した画像のFPS値やスピードを簡単にコントロールできます。
マウスをホバーした際に、方向に応じてオーバーレイがスライドする方向が変わります。オプションでオーバーレイの高さ・リバースの有無・スクローススピードなど様々変えることができます。
画像自体をPhotoshopなどでレタッチする必要なく、カラートーンや不透明度の変更をフェードのアニメーションで加えるjQueryのプラグインです。
スクロールに合わせてアニメーションさせるスクリプト。左右からスライドインしたり、上から降りてきたり、様々な動きを設定することができます。
data-scrollrevealでアニメーションを制御します。JavaScriptやスタイルシートに記述するのではなく、data-scrollrevelにルールに沿った文字列を記述します。
開始値、終了値、桁数、アニメーション時間などを指定して実装します。他のライブラリに依存していない、シンプルなライブラリです。
吹き出しが表示される時のエフェクトや、表示位置、表示させるイベント(クリック、マウスオーバーなど)、速度など、いろいろなオプションが設定できます。 ※IE8では吹き出しのCSSの角丸などが反映されません。
クラスを指定して、テキストをローテーションで順番に表示させるjQueryプラグイン。表示が切り替わる時のアニメーション、スピードなどを調整することができます。 ※IEでは、アニメーションの種類によって表示が逆さになったり […]
インパクトあるページに合うメニューだと思います。使用用途が限られてくるかなとは思いますが、忘れられない1ページにはなりそうです。
全画面画像を変更させるナビゲーションです。ナビゲーションの各ラベルをクリックすると対応したパネルが滑らかなアニメーションとともに展開します。
折れ線グラフ、棒グラフ、円グラフ、レーダーチャートなど、6種類のグラフを描くことができます。
CSS3による多彩なテキストアニメーションが実装できるjQueryプラグイン。エフェクトの種類が非常に豊富です。
スクロールするとカーテンが上がるような動きを実装できます。スクロールだけでなく、キーボードの矢印キーでも動きがスムーズです。
スタマイズ性の高いプラグインで,動きが自然なトランジション効果を簡単に実装することができます。
jQueryのメニュースライダー。マウスに追随してボーダーや背景がスライドします。IE8以下は角丸、透明な背景、IE7以下はボックスサイズをサポートしていません。
HTML要素をくるっとひっくり返すJSスクリプト。 ボタン、フォーム、動画などにも使用でき、水平方向にも垂直方向にも回転します。
各文字が次々に垂直・水平方向にアニメーションしていきます。アニメーションは、オプションでスピードやフォントサイズ、カラー等を設定することもできます。
テキストをスライド、フェードなどの様々なアニメーションで表示します。
円に沿ってアニメーションしながら飛び出すメニューを作成できます。メニューの位置調整、アニメーション、スピードなど指定することができます。
ULで定義したリストを初期化するだけで次のように円形にアニメーションします。各アイテムはドラッグ&ドロップで他の円リストに移動することが出来ます。
デモページの左端にマウスをもっていくと、ページ全体がずれてメニューが表示されます。CSS3対応のブラウザで実装が可能です。
スクロールによってコンテンツがダイナミックに変化していくのはとても格好よく、スタイリッシュです。
アニメーションスクロールをデフォルト化できるプラグイン。一瞬で飛んでしまうスクロールより便利なので、デフォルト化してしまうのも一つの手かもしれません。 アニメーションの速度やスクロール位置のオフセット、アニメーションエフ […]