Textillate.js
About Textillate.js combines some awesome libraries to provide a ease-to-use plugin for applying CSS3 animations to any text. Usage Simply include textillate.js and it's dependencies in your project to start creating unqiue effects. Credits Textillate.js is built on top of the simple, yet amazingly powerful animate.css and lettering.js libraries.
[CSS]円形エレメントの実装とホバー時に面白いアニメーションのエフェクトを与えるスタイルシート
最近よく見かけるようになった円形のエレメントに、ホバー時に普通のより面白いエフェクトをCSS3アニメーションで実装するチュートリアルを紹介します。 Circle Hover Effects with CSS Transitions 右：ホバー時のアイテム、左：通常時のサムネイルの状態です。 円形エレメントの実装 ホバーエフェクトのデモ 円形エレメントの実装 まずはベースとなる円形エレメントの実装です。 アイテム時を例に紹介します。 HTML 各円形のエレメントはリスト要素で、見出しやパラグラフをdiv要素で二重に内包します。 <ul class="ch-grid"> <li> <div class="ch-item ch-img-1"> <div class="ch-info"> <h3>見出し</h3> <p>パラグラフ <a href="http://">リンク</a></p> </d
ウェブサイトの使い方を目の前でアニメーションして説明するスクリプトをどんなサイトにでも埋め込める「Embedded Help System」
目の前でマウスカーソルを動かして説明すると理解してもらえるという場合に使えるのがこのjQueryのプラグインとして動作する「Embedded Help System」です。どのようなサイトにでも埋め込んで使うことが可能となっており、最大の特徴は実際のフォームやチェックボックスなどを操作する様子を目の前で見せてくれるという点。 一体何を言っているのかわからないと思いますが、これは実際に目の前でデモを見てもらうのが一番わかりやすいです。 デモは以下から。 Embedded Help System http://embedded-help.net/ デモを見るにはこの「Usage」ページにまずはアクセスします。 次に「Search database」をクリックするとこのようにしてクリックして使う順番の数字がふわっと浮かび上がります。これだけでも割とわかりやすいのですが、ここからが真価を発揮すると
[JS]画像をさまざまなアニメーションで拡大表示するスクリプト -imgZoom
imgZoom デモ [ad#ad-2] imgZoomの主な特徴 lightbox風のインターフェイス（暗いオーバーレイ、次の画像へのスイッチ） CSS/HTMLベースでのカスタマイズ フェードや回転のアニメーションで画像を拡大 ズームイン、ズームアウトのAPIの提供 jQueryのプラグインとして動作する軽量（7KB）スクリプト imgZoomの実装方法 外部ファイル 下記の3ファイルを外部ファイルとして記述します。 <link rel="stylesheet" type="text/css" href="css/imgzoom.css" /> <script type="text/javascript" src="sc
「○○氏の声」を次々と表示できるjQueryプラグイン「Quovolver」:phpspot開発日誌
Quovolver | a simple jQuery plugin for revolving quotes 「○○氏の声」を次々と表示できるjQueryプラグイン「Quovolver」。 「これは素晴らしい！革命的である」- by. phpspot みたいなものをアニメーションしながら次々表示できるjQueryプラグインです。 商品の説明ページなんかに利用者や著名人の声などとして表示する際に使えそうです。 アニメーションしながら切り替わります。 使い方は、必要なJSを読み込んだ後、要素を複数並べておきます。 例えば次のように。 <blockquote>aaa</blockquote> <blockquote>bbb</blockquote> あとは、$('blockquote').quovolver() のようにするだけです。 関連エントリ 通貨、日付のグローバリゼーションを可能にする
8BITS
DIRECTED BY VALERE AMIRAULT JEAN DELAUNAY SARAH LAUFER BENJAMIN MATTERN VOICE TALENT DAVID HENRY GERSON davidhenrygerson.com SOUND DESIGN BY NIKOLA CHAPELLE AND ALEXANDRE HASLE SOUND MIX BY NATHAN SENOT, AGM PROD. agm-prod.com ORIGINAL SCORE BY GREGORY SMITH kickmusic.net ORIGINAL 8-BIT MUSIC BY YANN VAN DER CRUYSSEN nurykabe.com CREDITS MUSIC IS "MAGICAL 8-BIT TOUR" b
YouTube - Making Future Magic: iPad light painting
This film explores playful uses for the increasingly ubiquitous 'glowing rectangles' that inhabit the world. We use photographic and animation techniques that were developed to draw moving 3-dimensional typography and objects with an iPad. In dark environments, we play movies on the surface of the iPad that extrude 3-d light forms as they move through the exposure. Multiple exposures with slightly
ディズニーの絵の描き方がわかる61のPDFが公開されています！ | POP*POP
なんと、ディズニースタジオの「絵の描き方」資料が公開されました。 61項目のポイントが紹介されています。インストラクターのWalt Stanchfieldさんは、クマのプーさんなどを手がけられた人ですよ。 下記に少しご紹介。 ↑ こんな感じで授業用のノートがPDFでダウンロードできます。説明つきなのがうれしいですね。 ↑ 第一回目のレッスン「エッセンスの抽出の仕方」です。 ↑ 物語の作り方まで教えてくれます。 世界で多くのファンを誇るディズニーの絵のエッセンスですから、絵に興味ない方でも、気になるところではないでしょうか。 61項目のタイトルはこんな感じ。「エッセンスの抽出の仕方」「アニメーションのための絵の描き方」「反発力を描く」「内側からの力を描く」「落書きの仕方」などなど、興味をそそるタイトルばかりですね・・・。 Abstracting the Essence Acting (dra
アンパンマンの種類
アンパンマンスーパー大図鑑1600 キャラクターせいぞろい！ と言う本を知ってますか？娘達が好きなので、買ってみたところ、 驚きのキャラクター数。更に、アンパンマンには何種類もあることが発覚！ あなたはどれだけ知ってましたか？
MovableType用アニメーションエフェクトのプラグインMooT.fx:phpspot開発日誌
MooT.fx MooT.fx is a plugin for MovableType based on the Moo.fx javascript effects library by the Mad4milk team. The MooT.fx tags are designed to add user-interactivity and enhanced usability to your site. moo.fx を使うためのMovableType用プラグイン、MooT.fx。 mooT.fxを使って次のようなエフェクトをMovableTypeの機能として組み込むことが出来るようです。 MooT Accordian MooT Scroll MooT Height/Width MooT Text Resize MooT Opacity 関連エントリ Javascriptライブラリmo
JavaScriptアニメーションフレームワークライブラリ「Run」:phpspot開発日誌
Run / Universal JavaScript Animation Framework / Start Run is the easy and basic way to animate web content! You're right, this is YAAF - yet another animation framework. JavaScriptアニメーションフレームワークライブラリ「Run」。 script.aculo.usのようなエフェクト風アニメーション機能を実現したりすることが出来ます。 太陽の周りを地球が回るデモのような、Script.aculo.usでは実現が少し面倒だったものも割と簡単に実現出来そうです。 script.aculo.us 同様、prototype.jsに依存しています。 ドキュメントも充実 関連エントリ prototype.jsベースの画像切抜き
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AniCollection - The easiest way to find, use and share CSS3 animations.
8 Bits
Making Future Magic: iPad light painting
Flashアニメ「アニメーター対アニメーション」パート2 - GIGAZINE