キーフレームを使ったCSS3アニメーションの入門として、ウェブページにちょっとしたアニメーションを適用するチュートリアルを紹介します。 Enhance Your Sites with CSS3 Animations デモページ [ad#ad-2] 下記は各ポイントの意訳です。 CSS3アニメーションとは アニメーションでドロップダウンするヘッダ 透過PNGを使ったカラーアニメーション 回転するローディングのアニメーション フォームのエラーをアニメーションで強調 フォームのエラーをアニメーションで強調:その2 CSS3アニメーションとは CSS3アニメーションはエレメントに異なる見た目を順に適用するステータスから構成されています。これらのステータスを定義するにはキーフレームを使って、アニメーションの持続時間をセットします。インターバルはパーセントを使って定義し、それぞれにCSSのスタイルを指

アニメーションといえばFlashやJavaScriptが主流でしたが、CSS3の登場でアニメーションを手軽にウェブサイトに利用できるようになってきました。 CSS3アニメーションを使った実用的なテクニックから、実験的なすごい作品までを紹介します。 対応ブラウザはほとんどのものがChrome, Safari, Firefox4となっています。 ※デモページは明記がないものは全てFirefox4での表示です。

操作に連動させて分かりやすくクールにメッセージ表示させるjQueryプラグイン「MessageBar」 2010年12月21日- MessageBar ? just another jQuery plugin 操作に連動させて分かりやすくクールにメッセージ表示させるjQueryプラグイン「MessageBar」。 エラーや何かメッセージを表示したい場合、一番分かりやすい例としてalertがありますが、なんとも味気ない感じになってしまうのは否めません。 MessageBarプラグインを使えば、指定したブロックエレメントの上部に分かりやすくアニメーションしながらクールにメッセージを表示できます。 デザインが色々と選べるのもこのプラグインの特徴です。 半透明で要素にオーバーレイして表示 角丸のウィンドウっぽいバーをスライドアニメーションしながら表示 シンプルですが落ち着いたデザインのバーを表示

Display Elements Sequentially with jQuery デモページ [ad#ad-2] 実装は非常にシンプルです。 HTML デモでは、画像をリスト要素で配置しています。 <ul> <li><img src="image.jpg" /></li> <li><img src="image.jpg" /></li> <li><img src="image.jpg" /></li> <li><img src="image.jpg" /></li> <li><img src="image.jpg" /></li> <li><img src="image.jpg" /></li> </ul> HTML アニメーションのトリガーとなるのは、「Show Images」のテキストリンクを使用しています。 <p style="clear: both; display: none;

パネルに配置したテキストを下部にいくにつれフェードアウトで表示し、残りのテキストをアニメーションで表示するコンテンツを実装するチュートリアルを紹介します。 残りのテキストをアニメーションで表示したキャプチャ [ad#ad-2] 実装 HTML HTMLはシンプルで、テキストと「Read More」ボタンをdiv要素内に配置します。 <div class="sidebar-box"> <p>パネルのテキスト</p> <p class="read-more"><a href="#" class="button">Read More</a></p> </div> CSS パネルの初期状態のサイズはスタイルシートで設定します。フェードアウトはCSS3グラデーションを使用します。 .sidebar-box { max-height: 120px; position: relative; overfl

Show / Hide Element Borders. The walking man (me) above, is implemented using only CSS3 animations and simple HTML. You can read more about how it was implemented here. Be sure to view this experiment on an iPhone, iPod or iPad (or android device). It's super cool! Short link below: tinyurl.com/csswalk Not working? Watch the video on youtube. Tweet More Experiments

リンクをクリックしてページを遷移する際に、フェードやスクロールのアニメーションを加えるスクリプトを紹介します。 デモページ Pageswitchの実装 実装は簡単です。 HTML 既存のHTMLに、特に手を加える必要はありません。 idに使用している「example」は適当なものに変更できます。 <div id="example"> <a href="//coliss.com/">Example #1</a><br /> <a href="http://www.example.com">Example #2</a><br /> </div> [ad#ad-2] JavaScript PageswitchはjQueryのプラグインのため「jquery.js」と当スクリプトを外部ファイルにし、下記のように各リンクにエフェクトを指定することができます。 $(document).ready(fun

Sencha Animatorを使えば、これまでのリッチメディア広告に匹敵するCSS３広告を作成することができます。文字や画像をスムーズに遷移させるアニメーションを作成したり、グラデーションがかかったボタンをデザインしたり、さらに分析用のトラッキングコードを埋め込んだりすることがSencha Animatorの中で行えます。また、これらは全てWeb標準技術を使ってできることです。 これらの標準技術を使えば、現在デスクトップ用のブラウザ向けのリッチメディア広告で使われているほぼ全ての機能は、Apple iOS、BlackBerry Torch、そしてGoogle Android向けに移植・再現することが可能です。 CSS３広告について企画・検討されている広告代理店、広告制作会社の皆様、Sencha Animatorの広告作成者向けオプションについてお問い合わせください。 Contact Us

jQuery Slide Effect | hv-designs jQueryを使って画像の上にコンテンツをクールにアニメーションされてオーバーレイ表示するサンプル。 特別に難しかったり真新しいものではないのですが、エフェクト的にカッコ良い効果だったのでご紹介。 スライドアニメーションしながら画像の上にコンテンツがオーバーレイで表示されます。 何かを紹介する際のバナーなんかでも使えそうですね。 関連エントリ ナビゲーションメニューを1歩進んだものに引き上げるjQueryチュートリアル集 jQueryでいい感じのコンテンツスライダーを作成するチュートリアルとサンプル jQueryで行うFlashみたいなスプライトアニメーションのチュートリアル アニメーションの残像が残るjQueryアニメーションチュートリアル jQueryで幅の大きなドロップダウンメニュー作成チュートリアル

これはクール！カーソルを合わせると背景がアニメーションするCSS3ボタン実装例 2010年10月07日- CSS3 Animated Bubble Buttons | Tutorialzine これはクール！カーソルを合わせると背景がアニメーションするCSS3ボタン実装例です。 ボタンにカーソルを合わせるとカッコよく背景がアニメーションされ、よりボタンが押したくなるかもしれないテクニックです。 デザイナの方は１つのテクニックとして知っておいて損はしなさそうなテクニックなので押さえておいてもよいかも。 デモページで見てみる アニメーションに使う背景画像。 アニメーション自体は transition プロパティを用いて実装されています。 関連エントリ CSS3の擬似クラスをIE6-8でも使えるようにする「Selectivizr」 便利なCSS3ツール6つ＋α CSS3のジェネレーター１４種 I

CSS3のアニメーションってスゴい！ 先日のぽんたくんの記事でも紹介されたように、CSS3ではアニメーションも制御できるようになりました。 ということで、ぼくもCSS3のアニメーションを使ってdemoをいくつか作ってみました。 SafariやChromeなどwebkitブラウザで表示してみてください。 コピペで使えるCSS3アニメーション - jsdo.it ※PLAYボタンをクリックすると表示されますよ 見れない人のために動画も撮ってみました。 どうですか？CSSだけで、まるでFlashを使ってるような表現ができちゃうんです。 今回はこのCSSのアニメーションのチュートリアルをご紹介します。 「NEW!」というアイコンが、1文字ごとにぴょこんぴょこん跳ねるアニメーションを作ってみましょう。 上記のdemoでいうと二つ目の動きです。 HTML <p class="animetionNew 

今 敏 第2エッセイ集『KON'S TONE II』電子書籍で2012年8月26日発売 ブロク「NOTEBOOK」からのベスト・セレクションに未発表の日誌を加えた全620ページ。表紙や本文は 今 敏 が描き留めた「落書き」が飾ります。 東北地方太平洋沖地震により被災された皆さまに心よりお見舞い申し上げます。 少しでも安らぎになればと、今 敏 が描いたイラストレーションから「壁紙」を作りました。 今 敏のラスト・エッセイ「さようなら」はこちら

ついつい、じぃっーと見いってしまった機械の動きを再現したアニメーションGIFをいくつか紹介します。 こういったのはいつもTwitterにあげるのですが、たまにはブログでも。

グリッドあるいはマトリックスに配置したサムネイルを使用して、ダイナミックにウェブサイトをナビゲートするスクリプトを紹介します。 デモ：個別パネル 別パネルへ遷移する際には、右下「SITEMAP」をクリックするとサムネイル一覧になります。 順番にクリックすると気がつかないのですが、飛び飛びでサムネイルをクリックすると、アニメーションの道順（？）がその通りになります。 対応ブラウザはFirefox3, IE6/7/8, Safari4とのことで、実装にはjQueryが必要です。

Are you wondering how long it takes to build a website? There are several factors involved. Learn all the important details here.

FlashもJavaScriptも使用せずに、スタイルシートでページをめくるアニメーションを実装した「Pure CSS3 Page Flip Effect」を紹介します。 Pure CSS3 Page Flip Effect デモページ 対応ブラウザはChrome, Safariと限定されたものですが、CSS3グラデーションやクリッピングを使用してリアルなアニメーションが実現されています。 Román Cortésでは他にもスタイルシートのすご技が掲載されているので、まだの方はぜひご覧ください。 CSSで実装した、ものすごいパララックス（視差）効果 スタイルシートのすご技、スムーズに回転するコーラの空き缶

画像を一切使用せずに実装する、軽快なアニメーションを伴ったナビゲーションのチュートリアルを紹介します。 Awesome Cufonized Fly-out Menu with jQuery and CSS3 デモページ デモでは右に配置されたナビゲーションの各ラベルにマウスホバーするとアニメーションでハイライトが移動し、それに伴う説明文が右からスライド表示されます。 HTML HTMLは非常にシンプルです。 <textarea name="code" class="html" cols="60" rows="5"> <div id="slidingMenuDesc" class="slidingMenuDesc"> <div><span>Maybe that's what life is... a wink of the eye and winking stars.</span></div

GIFアニメーションの色数やFPSの制約を受けずに、複数の画像からアニメーションを作成できるスクリプトを紹介します。 Canimate デモ 上記のデモで使用している画像のフォーマットはPNGで、GIFでは叶わない美しいアニメーションとなっています。 利用できる画像のフォーマットに制限はなく、どんなタイプの画像でも利用が可能です。 また、FPS（1秒あたりのフレーム数）、フレームのトータル数も指定でき、アニメーションのスピードを調整することも可能です。

デモ3種のキャプチャ 対応ブラウザはCSS3のボックスシャドウに対応しているFirefox, Chrome, Safariの最新版で、IE9でも対応が予定されています。 Shadow animationはjQueryのプラグインのため、実装にはjquery.jsが必要です。

jQuery & CSS Sprite Animation Explained In Under 5 Minutes | AddyOsmani.com | Where Web Businesses Grow jQueryで行うFlashみたいなスプライトアニメーションのチュートリアルが公開されています。 iPhone向けのサイト等ではFlashは使えませんが、jQueryによって実装すればアニメーション機能も実装出来ますね。 デモページ jQueryのコードが意外にシンプルです。 数年後のアニメーションはどうなっているのでしょうか。 関連エントリ アニメーションの残像が残るjQueryアニメーションチュートリアル キャラクターとバックグラウンドをアニメーションさせられるjQueryプラグイン「Spritely」 ブロック内の背景画像をスクロールアニメーションするjQueryサンプルプログラ