Webアニメーションを高速化するために知っておくべき10のこと（後編）
Webアニメーションを高速化するために知っておくべき10のこと（後編） 斉藤 祐也（株式会社リッチメディア） 前編から引き続き、後編でも最適化のために知っておきたいレンダリングプロセス、計測方法、そして最適化を妨げるよくあるアクシデントとその回避方法について紹介していきます。 アニメーションを高速化するために知っておきたいレンダリングプロセス ブラウザがどのようにウェブサイトを表示しているのかを知ることは、アニメーションだけに限らず、Webのパフォーマンス全体の高速化を行うために大切なステップです。 イスラエルの開発者であるTali Garsiel氏が公開した『How Browsers Work』は、HTML5 Rocksに転載され、複数の日本語訳も提供されている、ブラウザの内部動作を学ぶために読んでおきたいリソースの1つです。 そのリソースを参考に、レンダリングエンジンのメインフローにつ
[CSS]パネルをくるっと気持ちよく回転させるスタイルシート6種 -Fun with CSS
デモはCSS3アニメーションを使用しているので、最新のモダンブラウザでご覧ください。 各パネルをマウスでホバーすると、くるっとします。 Fun with CSS 回転のアニメーションは、左上から順に。 垂直：下方向 垂直：上方向 水平：右方向 水平：左方向 垂直：下方向：半回転 斜め パネルはべた塗りだけでなく、写真画像でももちろん動作します。 Fun with CSS：ネコの画像でもくるっと回転 HTMLはシンプルで、各パネルはdiv要素です。 <div class="front"> <h2>Front</h2> This is on front. </div> スタイルシートはちょっと長いので、下記ページをご覧ください。 Fun with CSSのコード
[CSS]スタイルシートで実装する気持ちいいリズムで弾むローディングのアニメーション
昨日、Facebookで紹介した「クラゲ」もCSSアニメーションとは思えない美しさでした。 こちらもなかなか楽しい、軽快なリズムで弾むローディングのアニメーションを実装するスタイルシートを紹介します。 デモページ 実装はHTML+CSSです。 もちろん、JavaScriptもFlashも使用されていません。 HTML spanを増やすと玉が増えます。増やした分のディレイをCSSで設定します。 <div class="loader"> <span></span> <span></span> <span></span> </div> CSS Webkit用とFirefox用の2種類が記述されているので長くみえますが、スタイルシートは非常にシンプルです。 .loader { text-align: center; } .loader span { display: inline-block; v
SVG関連の操作・アニメーション処理をシンプルにかける「SVG.JS」:phpspot開発日誌
svg.js - A lightweight JavaScript library for manipulating and animating svg SVG関連の操作・アニメーション処理をシンプルにかける「SVG.JS」 ちょっと、SVG苦手だわ、と思った方はこうしたライブラリでトライしてみるのもいいかもしれません。 次のような分かりやすいコードでSVGを操ることが可能になります ライブラリも5KB程度なので、簡単な画像を描画するのならこちらでブラウザ上で描いちゃったほうが軽そうですね。 デモページ 関連エントリ SVGグラフィックを手書き風アニメーションさせられる「Lazy Line Painter」 SVGを使った高度なアニメーションを実現できるライブラリ「BonsaiJS」 美麗なグラフをSVGで描画できるJSライブラリ「dc.js」
[JS]スライド内の複数の要素それぞれに異なるアニメーションを設定できるスライダー -Fraction Slider
スライド内に複数の要素を配置し、それぞれ異なるタイミングで異なるアニメーションを設定できるスライダーを実装するjQueryのプラグインを紹介します。 デモ：Animation Basic それぞれ対角にアニメーションでスライドします。 Fraction Sliderの使い方 実装は非常にシンプルです。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <link rel="stylesheet" href="fractionslider.css"> <script src="jquery-1.9.0.min.js" type="text/javascript"></script> <script src="jquery.fractionslider.js" type="text/javascript" ></script>
CSSのtransformでクルクル回転するパネルのサンプル
CSSの【transform:rotate()】を使った回転するパネルのサンプルを作ってみました。 手法としては比較的知ってる人も多いかもしれませんが自分用備忘録として。 回転変形おもしろーいベースとなるHTMLはこちら。 <p><a href="#">Sample Box 1</a></p> はい、1行ソースです、すみません。単純に【p】の中に【a】を内包しているだけ。これに p{ display:block; margin:10px; width:100px; height:100px; } a{ display:block; line-height:100px; text-decoration:none; text-align:center; color:#fff; border-radius:6px; background-color:#44f; transition:0.3s l
CSS3でボーダーを超かっこよくアニメーションするサンプル:phpspot開発日誌
Simple yet amazing CSS3 border transition effects CSS3でボーダーを超かっこよくアニメーションするサンプル とりあえずデモページを見ていただくのが一番ですが、ボーダーをアニメーションさせて未だかつて無い効果をブラウザ上で表現しています。 デモページ 応用することでかなりいろんなことができそうだな、という、なんだかとってもワクワクするデモでした。 関連エントリ CSS3でシャレオツなリストを作るチュートリアル PhotoshopでデザインしたシェイプをCSS3に変換するプラグイン「CSS3Ps」 CSS3やCanvas、JS等を使ったローディング画像実装プラグイン１２ フルスクリーン背景がスライドショーになるCSS3サンプル
JavaScript アニメーションのデザインパターン
JavaScript でアニメーションを作る アニメーションとは何？ ビューを少しずつ回転、拡大縮小、移動、変色などを行い、連続的な動きを作る こんな感じ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; setInterval(function() { el.style.opacity -= 0.01; }, 10); </script> なんで、あんな感じの書き方になるの？ setInterval の意味が分からない こんな感じで書けないの？ <div id="view">hoge</div> <script> var el = document.getElementById('view'); el.style.opacity = 1; w
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
