Googleも推奨！アニメーションライブラリTweenMaxの使い方 入門編 — un-Tech
ごきげんよう。フーミンです。 「JavaScriptでアニメーション作るならTweenMaxが最強だよ」と先輩から教わり早2年。いまだ現役最強（僕の中で）JavaScriptアニメーションライブラリTweenMaxの良さを広めるために、入門編・応用編の全2回に分けてご紹介しようと思います。 TweenMaxとは TweenMaxとは、GreenSock社が開発した超高性能アニメーションプラットフォーム「GSAP」のひとつで、DOMアニメーションに特化したJavaScriptライブラリです。 requestAnimationFrameを使用しているため、jQueryのanimateメソッドを使うより、動作が高速かつ安定しています。 同じようなライブラリにmokichiくんが紹介してくれたVelocity.jsというのもあります。 TweenMaxと同様に動作が高速かつ安定しており、jQuer
[JS]HTMLは汚さずに、テキストにちょっと面白いさまざまなアニメーションを適用できるスクリプト -LetterFX | コリス
Effect -LetterFx LetterFXの使い方 Step 1: 外部ファイル 当スタイルシート・スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <link href="jquery-letterfx.css" rel="stylesheet" type="text/css" /> </head> <body> ... <script src="http://code.jquery.com/jquery.min.js"></script> <script src="tuxsudo.min.js"></script> <script src="jquery-letterfx.js"></script> </body> Step 2: HTML アニメーションを適用するテキストはp要素などで実装し、classやidなどを付与しておきます。 <p
[CSS]この発想はすごい！画像をモザイクからくっきり見せるスタイルシートのテクニック
一枚の画像を使って、モザイク状の画像をアニメーションで少しずつくっきりさせるスタイルシートのテクニックを紹介します。 もうほんと、ナイスアイデア！ コードを見る前に実装方法をちょっと考えてみてください。 ↓はブラウザでの表示をアニメーションgifにしたものです。 Gif Style CSS3 Animation アニメーションはロード時のみなので、繰り返し見たい時はリロードで。 実装はこんな感じです。 HTML HTMLは非常にシンプル！ 画像はdivの背景として表示します。 <body> <div class="image"></div> </body> CSS スタイルシートも非常にシンプル、一枚の画像にモザイクからくっきりまでの各コマを並べ、CSSスプライトで次々にアニメーションで表示しています。 コードを見るまで、どうやって実装してるのか全く分かりませんでした。 body { ba
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
throw Life - ActivityのOpenとCloseをアニメーションさせる
