jQueryのアニメーション関連いろいろまとめ :: 5509(+1)

2010/02/09 407 users jQuery animateメソッド Tips 単体 スライド

jQueryを使えば単体でもフェードやスライドなどのアニメーションを誰でも簡単に使えますが、animateメソッドを使うとより便利に凝ったアニメーションを実行することができます。animateメソッドを使って何かを作るときに役立ちそうなチュートリアルと、すぐ使いたい人向けのプラグインを集めました。 TIPS/チュートリアル プラグイン/animateメソッドの拡張など プラグイン/単体で使えるもの... 続きを読む

[CSS]コピペで簡単にCSS3アニメーションを実装できるライブラリ・ツールのまとめ | コリス

2012/11/21 375 users コリス トゥイーン CSS イージング コピペ

CSS3アニメーションで、背景を変えたり、ボタンをバウンドさせたり、画像をフェードやフリップで表示したりなどをコピペで実装できるライブラリ、緩急をともなったイージングやトゥイーンの微調整を設定できるオンラインツールをまとめて紹介します。 animatable CSS3アニメーションの基本から、かっこいい応用までコピペで簡単に実装できます。 詳細：CSS3アニメーションの基本的な実装例のまとめ An... 続きを読む

[JS]jQueryのプラグイン33+1選 -2010年7・8月 | コリス

2010/08/31 336 users jQuery コリス アニメーション 背景 プラグイン34選

紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Shadow animation シャドウをアニメーション。 bgFade マウスホバーで背景をフェードでアニメーション。 hoverFade マ [...] 続きを読む

[JS]jQueryのプラグイン33+1選 -2009年10月 | コリス

2009/10/27 268 users jQuery コリス パネル オーバーレイ テキスト

紹介済みから未紹介のものまで、jQueryのプラグイン34選です。Image Overlay テキストなどのパネルを画像の上にオーバーレイ表示します。dumbcrossfade 打ち出し画像をフェードで次々に変更 [...] 続きを読む

[JS]ページ遷移にフェードやスクロールのアニメーションを加えるスクリプト -Pageswitch | コリス

2010/11/23 257 users コリス example スクロール スクリプト アニメーション

デモページ Pageswitchの実装 実装は簡単です。 HTML 既存のHTMLに、特に手を加える必要はありません。 idに使用している「example」は適当なものに変更できます。 <div id="example"> <a href="http://coliss.com/">Example #1</a><br /> <a href="http://www.example.com">Examp... 続きを読む

[JS]オルトを利用して、画像にキャプションをかっこよく表示するスクリプト -Captify | コリス

2009/03/02 230 users コリス オルト キャプション 常設 スクリプト

画像のオルトを利用して、画像の上にオーバーレイでキャプションを表示するスクリプト「Captify」を紹介します。 Captify demo デモでは、画像にマウスオーバーすると、下側からキャプションがスライドしてオーバーレイで表示されます。 オプションでは、キャプションの表示位置（上・下）、表示のスピード、不透明度、表示方法（フェード・スライド・常設）、クラス名などが変更できます。 キャプションは... 続きを読む

こんなことができるんだ！CSSのボーダーを破線や点線にするスタイルシートのテクニック | コリス

2020/08/25 192 users コリス 点線 傾斜 CSS アニメーション

ただし、このCSSでは破線や点線の大きさや長さをコントロールできません。また、ボーダーに傾斜やフェードやアニメーションを与えることもできません。 しかし、いくつかのテクニックを使用することで、それが実現できます！ Amit Sheenが作成したDashed Border Generatorで簡単に実現できます。 See the Pen Dashed Bor... 続きを読む

[JS]パララックス、スライドなど、スクロール時のエフェクトをよりスムーズにしたスクリプト -SuperScrollorama | コリス

2012/05/27 172 users パララックス コリス トゥイーン エフェクト スクリプト

パララックスをはじめ、フェードやスライド、トゥイーンなど、多種多様なアニメーションに対応している、「スクロール時に面白いエフェクトを与えるjQueryのプラグインのまとめ」で紹介した「scrollorama」を強力にパワ [...] 続きを読む

jQueryを使ったアニメーションと、ユーザビリティの話。それとCSS3。 - 甘味志向＠はてな

2011/12/03 150 users jQuery ユーザビリティ Tips モロ 甘味志向

JavaScript, CSS3 JavaScript Advent Calendar 2011、2日目のもろへいやです。とても遅れてすいません… 私は技術的な話は得意ではないので、デザイン面からJavaScriptプログラマーに向けてのTipsを書きたいと思います。今回は、アニメーションの話を書いてみます。 jQueryは標準で、要素の表示・非表示を切り替えるときにフェードやスライドを使うことが... 続きを読む

[JS]アニメーションで動作する画像ギャラリーの超軽量すぎるスクリプト -Rhinofader | コリス

2011/10/31 125 users jQuery slideshow コリス images 手動

実用的なオプションを備えた、フェードのアニメーションで切り替わる画像ギャラリーを実装するjQueryのプラグインを紹介します。 操作方法は自動・手動の2つです。 左下のアイコンで再生・停止、左右の矢印アイコンで画像を前後に切り替えます。 Rhinofaderの実装 HTML 画像はリスト要素で実装します。 <ul id="slideshow"> <li><img src="images/001.j... 続きを読む

[JS]画像ホバーで、さまざまな要素を配置した半透明のパネルをアニメーションで表示するスクリプト -HCaptions | コリス

2013/03/10 120 users jQuery コリス jquery.js Step 半透明

画像をホバーすると、スライドやフェードのアニメーションで表示する半透明のパネルを実装するjQueryのプラグインを紹介します。 パネルは実装もカスタマイズも簡単です。 HCaptions -GitHub HCaptionsの準備 HCaptionsのデモと実装 HCaptionsの設定 HCaptionsの準備 まずは、スクリプトを使う準備から。 Step 1: 外部ファイル 「jquery.js... 続きを読む

[JS]多彩なエフェクトが面白い、ボックスにパネルをスライド・フェード表示するスクリプト -Mosaic | コリス

2011/04/19 119 users Mosaic circle コリス キャプチャ エフェクト

デモページ ダイナミックな斜め方向のスライドのアニメーションで表示 Mosaicの実装 HTML: circle 上記の一番上のキャプチャ、「circle」の実装例です。   続きを読む

[CSS]1ページで構成されたウェブサイトで使える、かっこいいCSS3アニメーションのテクニック | コリス

2012/01/31 113 users コリス div要素 ナビゲーション アニメーション スライド

CSS3アニメーションを使って、ダイナミックなスライドやフェードのアニメーションでページ（コンテンツ）を切り替えるテクニックを3つ紹介します。 Demo 3 Demo 3は左からスライドのアニメーションで切り替わります。 実装 デモは一見、Homeを含む4ページで構成されているように見えますが、1ページで作成されています。 HTML HTMLはdiv要素で配置したコンテンツが4つ、ナビゲーションが... 続きを読む

[JS]美しいエフェクトを備えた水平タイプのアコーディオンのスクリプト -zAccordion | コリス

2011/06/13 113 users コリス ドロップシャドウ アコーディオン jQuery 実装

滑らかなスライドのアニメーション、繊細なドロップシャドウ、フェードで表示されるインフォボックスなど、美しいエフェクトを備えたアコーディオンのjQueryのプラグインを紹介します。 zAccordion — An Inverted Accordion スライドの重ね順を反転させたちょっと面白いデモ。 zAccordionの実装 HTML アコーディオンの各パネルはリスト要素で実装します。 続きを読む

[CSS]画像の上に半透明なパネルを簡単に配置できる便利なスタイルシート（フェードも可） -Label.css | コリス

2013/05/21 109 users コリス 半透明 エフェクト CSS ホバー時

画像の上に半透明なラベルを天地中央、左右に簡単に配置でき、しかもホバー時にフェードでラベルを表示するなどのエフェクトも備えたスタイルシートを紹介します。 Label.css Label.css- GitHub Label.cssのデモ Label.cssの使い方 Label.cssのデモ デモでは、画像のラベルを動的に試すことができます。 通常利用する時は、静的に。 デモ 左のパネルでラベルを表示... 続きを読む