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.
[JS]jQueryを使って、超スムーズなCSS3アニメーションを実装する -jQuery Transit
昨日に続いて、jQueryとCSS3アニメーションのコラボです。 今回紹介するのは、jQueryでCSS3アニメーションを超スムーズにするように助けるプラグインです。 jQuery Transit デモページ [ad#ad-2] jQuery Transitの使い方 jQuery Transitのデモ jQuery Transitの対応ブラウザ jQuery Transitの使い方 「jquery.js」の後に当スクリプトを外部ファイルとして記述します。 外部ファイル <script src='jquery.js'></script> <script src='jquery.transit.js'></script> あとはjQueryの「.animate」の代わり、「.transiton」を使用してアニメーションを実装します。 $('...').transition jQuery Tra
[JS]CSS3アニメーションとjQueryの利点を組み合わせたスクリプト -cssAnimate
CSS3アニメーションとjQueryのいいとこ取りをした、ページにアニメーション機能を取り入れるjQueryのプラグインを紹介します。 cssAnimate jQueryのアニメーションの特徴 短いコードで簡単に記述することができますが、動作が遅い（特にモバイル機器で）。 CSS3のアニメーションの特徴 動作が高速で、柔軟に記述できますが、コードの量が多くなります。 cssAnimateの特徴 jQueryとCSS3の利点を組み合わせ、短いコードで高速に動作するアニメーションを利用できます。 jQueryのアニメーションの構文を全てサポート。 CSS3アニメーションの利用。 ブラウザの互換性。 CSS3非対応ブラウザにはjQueryでアニメーションを提供。 コールバック関数。 jQueryのfadeIn, fadeOutなどの使用。 全てのプロパティがアニメーション可。 jQueryでサポ
マウスホバーでスムーズにjQueryのアニメーションをコントロールする方法 :: 5509
jQueryを使えば超簡単にアニメーションもできますし、フェード効果の実装も楽々できますね。簡単に実装できるので結構使ってるサイトを見ますが、カーソルを素早く乗せたり外したりするとチラチラすることが多いんですよね。 何言ってるか文章だと伝わりにくいので、サンプル1を確認してみてください。 どうでもいいっちゃどうでもいいのかも知れないですけど、こういう小さなこだわりって結構重要なんじゃないでしょうか。 で、このチラチラ、簡単に解決できるので知らなかった人は覚えておくといいかもです。 結論は簡単で .stop(true, false)を.animate()の前に入れる .animate()メソッドのオプション部分でqueue: falseを指定する のいずれかです。 このときに.stop()メソッドを利用するのですが、.stop()メソッドには2つ引数を指定できて、引数の値で動作もちょっと変わ
Flashばりのカッコいいテキストアニメーションを簡単作成可能なjQueryプラグイン「jOla」:phpspot開発日誌
Flashばりのカッコいいテキストアニメーションを簡単作成可能なjQueryプラグイン「jOla」 2010年03月18日- Senamion.com - jOla (Ola effect on text) plugin: documentation and demo page Flashばりのカッコいいテキストアニメーションを簡単作成可能なjQueryプラグイン「jOla」。 グラデーションがギュイーンと流れるようなテキストアニメーションが実装できます。 訪問者がなんらかのアクションを起こした際にアニメーションすると驚きとともに、テキストを目立たせることができ、通知などの用途に使えそうです。 サイズを変えずに、グラデーションだけアニメーションさせるような効果も簡単にできます。 テキストに芋虫のような若干きもちわるいアニメーション効果を与えたりも。 実装もjQueryプラグインだけあって、
Spritely.net – Coding Masters
jQuery.spritely is a jQuery plugin created by Artlogic for creating dynamic character and background animation in pure HTML and JavaScript. It’s a simple, light-weight plugin with a few simple methods for creating animated sprites such as the birds you see on this page, and dynamic scrolling backgrounds. You can use it on any html web page, and any part of the page can interact with a sprite (clic
Flashが無くてもアニメーションしたい人のためのjQueryプラグイン「jQuery.spritely」 | Web活メモ帳
「jQuery.spritely」はHTMLとJavaScriptでアニメーションさせる事ができるプラグインです。CSSスプライトを使用して構築されており、Flashが使えないiPhoneやiPad向けのためにもチェックしておくべきかもしれません。 詳しくは以下 スクロールする背景画像 一枚の画像をスクロールさせる事でアニメーションを実現させているようですね。 公式サイトでは、以下の画像を使用していました。 コードもシンプルに１行で実装できるようです。 $('#bird').sprite({fps: 12, no_of_frames: 3}); 以下のブラウザで動作するようです。 Internet Explorer 6 + Firefox Safari Chrome Opera アニメーションを入れる事でユーザビリティーが低下しないよう、利用場所には注意してください。
Animate Panning Slideshow with jQuery « Build Internet
If there’s one thing that never seems to go out of style, it’s a good jQuery slideshow. Highly visual websites rely on the ability to showcase imagery automatically. Whether it be a professional photographer or zoo, slideshows pop up so frequently because they work well. In today’s tutorial we’ll take the makings of a classic slideshow, but use a different kind of transition to animate between sli
AutoSprites - A jQuery Menu Plugin
Update 1/22/2009 - This plugin now contains support for an active state. It is just as easy to use and all of the animation still works with it. Read below to see how it works. (This was originally posted 10/28/2009) Download the Files (Zip) | View a Demo We have written and released a jquery dropdown menu plugin as well as a CSS Sprites2 Plugin -- this post is along the same lines. Its purpose is
jQueryによるアニメーションエフェクトの基本 (1/5)
jQueryの特徴の1つは、Webサイトに動きを付ける「アニメーションエフェクト」を手軽に実装できることです。jQueryで実現できるのは、セレクターで指定したHTML/XHTML（以下、HTML）要素のサイズや位置、透明度を時間の経過とともに徐々に変化させ、動いているように見せる簡単なアニメーションですが、最近のWebデザインで用いられる“動きのあるUI”を作るのには重宝します。 今回は、jQueryに用意されているアニメーションエフェクト関連の命令を紹介します。 非表示状態の要素を表示するshow() show()は、CSSのdisplayプロパティの値が「none」、つまり非表示に設定されているHTML要素を、アニメーション付きで表示状態（display:bolck;）に切り換える命令です。要素の透明度を透明から不透明にしながら、サイズ（高さ／幅）を0から本来のサイズに変化させます。
anything from herejquery.js におけるアニメーションコードの解読 ( 9 )
これまで 8 回に亘って jquery.js のアニメーションコードを解読してきました。自らの理解を深めるために、また閲覧者により関心を抱いて戴くためにも、いくつかのサンプルアニメーションも作成し、その解説もおこなってきました。 そしてついに、このエントリイをもって jquery.js のアニメーションコードの全ての解読を終えることになります。既に高い山は登り終えているので、残されたメソッドは比較的簡単なものばかりです。 jQuery().slideDown() メソッド 引数：speed、callback 返値：jQueryインスタンス 機能：要素の幅を一定に保ちつつ、高さを 0 から徐々に所定の高さまで変化させながら要素を表示します。 第 1 引数に高さに関わる各種の CSS プロパティ値を全て "show" に設定した CSS オブジェクトを、第 2 引数に speed を、第 3
マウスオーバーで画像を扉のように左右にアニメーションさせるjQueryサンプル:phpspot開発日誌
Image splitting effect with CSS and JQuery ・TutsValley マウスオーバーで画像を扉のように左右にアニメーションさせるjQueryサンプルが公開されています。 画像上にマウスを置くと、ビローンと中心から半分に割れて左右にアニメーションしていきます。 デモページ 面白いのは、１枚の画像でこれを実現しているところです。 CSSで２枚のブロックを作って、それをアニメーションさせています。 応用することで、縦方向に分割したりと、他にも面白いことが出来そうです。 関連エントリ jQuery用のGUIコンポーネントプロジェクト「mbideasproject」がすごい ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集 ユニークで使えそうなjQueryプラグイン10個
jQueryで作るリアルなホーバーエフェクト – creamu
これはすごい。思わずうなってしまった。 Adrian Pelletierさんのブログ&デザインポートフォリオサイトの記事です。 マウスオーバーすると、ふわっとアイコンが浮き上がって、マウスアウトですっと下に落ちます。 落ちた時のバウンドも実装されているので、有機的でとても気持ちいいですね。 デモは以下から。 » View Demo ぜひ見てみてください♪ » Create a Realistic Hover Effect With jQuery 昨日は会社のイベント。「2人のアートディレクター 仕事・生き方・考え方」というタイトルで、mountのイム・ジョンホさんとRAKU-GAKIの西田幸司さんにお話を伺いました。 懇親会でご挨拶させて頂いたんですが、刺激になりますね。
anything from herejquery.js におけるアニメーションコードの解読 ( 1 )
jquery.js におけるアニメーションコードの全容解明のために、まずは基本的事項から認識を深めていこうと思います。 Javascript によるアニメーションとは何か アニメーションとは、多数の静止画を所定の時間内で連続的に切り替えて「動き」を演出する一連の動作です。アナログ動画は Max 30 枚/秒の静止画から構成され、0.03 秒ごとに切り替わることにより動きを演出しますが、スクリプトによるアニメーションでも静止画の切り替えを連続的に行うことによって動きを表現します。 具体的には対象とするタグ要素の CSS スタイル属性値を、スクリプトから定期的に変化させてアニメーションを実現します。コンテンツの幅や高さなどの CSS スタイル値に、初期値、定期的増減値及び終了値の 3 つの値を与え、それらを時間軸上で処理することにより「動き」を演出します。 jquery.js ではアニメーショ
【ハウツー】jQueryでアニメーションならコレで決まり?! 新星フレームワーク「GX」 | エンタープライズ | マイコミジャーナル
新着記事一覧 がまかつ、同社鮎竿の頂点に立つ「エクセルシオ・マスターマインド」発売 [17:52 3/30] ドゥカティ、ネイキッドバイク「ストリートファイター」を6月に発売 [17:39 3/30] 今年の桜の元気度は? - 桜の健康診断「花数調査」開始、ウェザーニューズ [17:33 3/30] 【レビュー】パイ型メニューを表示してマウスだけで簡単操作 - Firefoxアドオン「easyGestures」 [17:30 3/30] フォルクスワーゲン、「ティグアン」に追加グレード「スポーツ&スタイル」 [17:24 3/30] Cypress、非同期SRAMなど3製品を発表 - 64Mビットまでポートフォリオを拡張 [17:20 3/30] G-Tune、「FEZ」大型アップデートに対応した推奨デスクトップ3製品 [17:18 3/30] 名古屋鉄道、7000系と100
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
AJAX Crawler - Collection of DHTML and AJAX Samples.: jQuery.Spritely - jQuery based animation plugin
Horizontal Sliding Panel With jQuery | DevSnippets
Aext.net
css-lecture.com