GIFアニメからAPNGの時代に！ 次世代画像形式APNGを使いこなそう - ICS MEDIA
APNG（エーピング）とはアニメーションするPNG画像のことで、アニメーションGIFに取って代わる次世代の新しい画像形式です。もともとブラウザベンダーのMozillaが提案した規格で、ウェブサイトのアニメーション表現に利用できます。従来はアニメーションGIFが主流でしたが、アニメーションGIFは色数の制限や輪郭のジャギーなど品質面の制限が多いファイルフォーマットです。その制限を払拭してくれると期待されるのがAPNG形式です。 データ容量・品質から比較する画像形式〜APNGは容量が軽くて綺麗 上図ではアニメーションGIF・APNG(8bit・32bit)・PNG連番画像をデータ容量・データ品質でマトリクス図にしました。APNG 8bitはアニメーションGIFと同じ256色のサポートなのでAPNG 8bitの方がデータ容量は若干小さいものの、差はほとんどありませんでした。APNG 32bitは
見ていてわくわくするアニメーションタイポグラフィックスまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。野田です。 夏ですね。夏といったら思い浮かぶのはなんでしょうか。 僕は風鈴の音色とセミの鳴き声です。 前々回からずっとアニメーションネタが尽きないので、今回もアニメーションネタを紹介させていただきます。 少し前からアニメーションタイポグラフィックスというのが僕の中で流行っており、趣味程度に作ったりしています。 これは文字を動かしてアニメーションにする技法で、Animated Typefaceともいい、とても美しく、何度見ても飽きません。 その際に参考にしているVimeoのリンクをまとめさせていただきます。 アフターエフェクトで作成し、gifアニメーションまたはpngで実装してみてください。 長編※音声注意 After Effects : Animatic – Animated Typeface
60fpsのサイトパフォーマンスを目指す - ワザノバ | wazanova
http://calendar.perfplanet.com/2013/the-runtime-performance-checklist/1 comment | 0 pointsGoogle ChromeチームのPaul Lewisが、ページ読み込み後、つまりユーザが閲覧する際の、UIレスポンス、スクロール、アニメーションなどサイトパフォーマンスについてまとめています。 まずは60fpsのパフォーマンスを達成する。よって、16ms以上かかるフレームは全て問題とみなす。 1. Large invalidations of layout and styles エレメントでのクラスの変更やJavaScript/CSS transition/CSS animationで直接エレメントのスタイルを変更すると、ブラウザはレンダリングツリーの一部もしくは全部を無効にしてしまう。最悪のケースでは、ドキュ
requestAnimationFrame でフレームと再描画更新を制御する | Yomotsu net
Canvas や SVG などを用いて、アニメーションを行う場合の描画繰り返しについて考えます。 描画の繰り返しアニメーションには requestAnimationFrame や setTimeout など利用し、そのタイミングで再描画を繰り返すという手法が一般的です。 これまで、 setTimeout を利用することが主流で、60 FPS のアニメーションの場合は例えば以下の様なコードで実現することも多かったかと思います。 var x = 0; ( function loop(){ setTimeout( loop, 1000 / 60 ); x += 1; console.log( x ); } )(); ただし、setTimeout や setInterval は、ブラウザー側で再描画の準備が整っているか否かにかかわらず、必ず実行されてしまいます。また、ブラウザーのタブが非表示 (バ
スマフォアプリの操作が気持ちいいエフェクトがたくさん！タップ操作時のエフェクトのまとめ -Tapotype
Tapotype 掲載されている各エフェクトはタップやクリック操作で、実際にアニメーションで動作します。 サイト閲覧には、Safariをオススメします。 各エフェクトはカテゴリ別にまとめられており、それぞれ詳細ページも用意されています。
[iphone/safari] JavascriptとCSSアニメーションでフリック操作を実装してみる 続き : nogunogu
こんにちは。のぐちです。 前回はフリック操作を判定してみるところまでを実装しました。 では、CSSアニメーションをつけてフリックに合わせて画面を動かしてみよう、 と思ったのですが、Javascriptを見直していたらちょっと時間がなくなってしまったので、 今回はスクリプトの改良のみです。 ■ クロージャを使って書き直す ■ フリック感を高める ■ ちょっとだけアニメーションっぽく 以上の改良をしてみます。 ■ クロージャを使って書き直す まず、前回「余談」と書いてしまったクロージャですが、それを利用して書きなおします。 動作そのものは変わっていませんが、クロージャを使ってグローバル変数を使わない形にしました。 <script type="text/javascript"> $(function() { var box = $("#box")[0]; var touchHandl
zLayer jQuery Plugin - Orientate Elements | Devin R. Olsen Web Developer
Orientate web elements around based off of your mouse's position to either the page or parent element. zLayer is perfect for interactive illustrations.What is zLayer? zLayers is a jQuery plugin that allows you to orientate an element based on the position of your mouse to the page’s window, or element’s parent. zLayer is perfect for interactive illustrations and rich user experience through creati
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
US Open Sessions - Motion Demo
motiontable
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
5509.me