jQueryで破棄されたrequestAnimationFrameとJSでのアニメーション実装で注意すること自己紹介 ども。KAYACでJS書いてる@kyo_agoです 今年に入ってからはSVG Girl（SVG女子）とか、HTML5花火大会（のベースコード）とか、www.kayac.comのJS書いてます。 こないだhtml5とか勉強会で話しました 最近はスマホ環境で色々JS書いてます
requestAnimationFrame ＜ よーしおまえらー、アニメーションにsetInterval使うなよー - くろまほうさいきょうでんせつ
より適切なものが追加されたのでそっちを使いましょう。 setInterval/setTimeout → requestAnimationFrame; これまでは setInterval function render(){ // アニメーション 1フレーム分の処理 } setInterval(render, 1000 / 60); これはもう古い。 これからは requestAnimationFrame function animationLoop(){ render(); requestAnimationFrame(animationLoop); } animationLoop(); こうすべし。 requestAnimationFrameにすると何がいいの？ 複数のアニメーション描写処理を一つにまとめて最適化してくれる 同じ用に動かしている物体A,Bの動きが次第にずれていくとかがなくな
jQuery.stopのjumpToEnd引数が便利すぎてやばい（JavaScript Advent Calendar 2010 5日目） - KAYAC Engineers' Blog
JavaScript Advent Calendar 20105日目のago（@kyo_ago）です。 jQueryのソースを眺めててjQuery.stopに引数があることに気づいたので調べてみました。 まず、簡単なスライドダウンメニューを作ってみたいと思います。 jQuery.stop 1 - jsdo.it - share JavaScript, HTML5 and CSS JS部分は以下の通りです。 $(function () { $('div').hover(function () { $(this).find('ul').slideDown(); }, function () { $(this).find('ul').slideUp(); }); }); 少し触ると分かると思いますが、マウスがmenuから外れた後も何度も.slideDown、.slideUpが実行されるため非常に
requestAnimationFrame for smart animating - Paul Irish
If you’ve never written code to animate inside the browser, you can stop reading :) What is requestAnimationFrame? In your animation work, you’ve used a timer loop to make changes every few milliseconds. Good for us: browser vendors have decided, “hey, why don’t we just give you an API for that, because we can probably optimize some things for you.” So it’s basic API for use with animation, whethe
CSS3のアニメーション機能のTransitionとAnimationで、アニメーション中の値は取得できるのか (Kanasansoft Web Lab.)
結論、getComputedStyleを使えば取得できる。 ただし、今のところはWebKit(SafariかChrome)の実装しかないため、他のブラウザではどうなるのか不明。 もしかしたら、仕様に明記されているかもしれないけど、そこまで調べていない。 <!DOCTYPE html> <html> <head> <title>css3 transition animation</title> <style> #transition-box{ position:fixed; border:1px red solid; top:30%; left:0px; -webkit-transition-property:left; -webkit-transition-duration:1s; -webkit-transition-timing-function:linear; transition-
DOM+CSSアニメーションにはsetTimeout と setInterval どちらを使うべきか | TwitScratch
DOM+CSSアニメーションを群舞させるには、一つの関数の中でリフロー(レイアウトの再計算)させずに複数のノードをアニメーションさせなければならない。関数を抜けて外側でループすると、ブラウザがここぞとばかりに画面を更新してしまうため、群舞が崩れてしまう。ハードル高いんだぜ
jQuery Animations with automatic CSS3 transitions when possible
jquery.animate-enhanced plugin Extend $.animate() to detect CSS transitions for Webkit, Mozilla and Opera and convert animations automatically. Compatible with IE6+ Properties supported: (more to come) left/right : using translate(x, y) or translate3d(x, y, z) top/bottom : using translate(x, y) or translate3d(x, y, z) opacity width height New features in v1.0: Animation 'queue' support (including
Flashのように滑らかなアニメーションを実装するには(uupaa.js vs jQueryデモ) - latest log
JavaScript で Flash のような滑らかなアニメーションを行うためには、クロスブラウザな知識の他に、GC(ガベージコレクション)や「どうすれば安定した品質がだせるのか」といったスキルが求められます。 # GC の話は WEB+DB PRESS 57 でちょっと書いてます。 派手目なアニメーションが目的で jQuery を採用している方もいるとは思いますが、実は uupaa.js でも アニメーションや easing が利用できるんです。あらびっくり。 ただ「機能がありますよ〜」だと、さみしいので みんな大好き jQuery と uupaa.js のアニメーションの品質の違いが分かるようなデモを作成してみました。 iPhone/iPad や、IE6〜IE8で opacity を切り替えて見ると、ハッキリと違いが分かると思います。 http://jsdo.it/uupaa/uufx
ブラウザごとのJavaScriptアニメーション比較
ここ最近JavaScriptでアニメーションする機会が結構増えてきたのですが、やっぱりブラウザによって速度というか動きがかなり違うので、その比較をメモメモ。 IE6.0 IE6.0は以外にもアニメーション処理は速いというか滑らかです。 前にもJavaScriptでアニメーション（animate）するときに気をつけたいことで紹介しましたが、中に画像がたくさんあるdivタグをmargin-leftとかでアニメーションすると激重になる可能性があるので注意が必要です。 position:absoluteでのアニメーションはかなり調子良いです。 IE7.0 比較的問題がないブラウザです。 marginを使ったアニメーションにも強いですし、opacityを使って透過してフェードアウトとかにも強いです。 IE7.0は重い重いという話が良くありますが、アニメーションに限ってはなかなか出来るやつですｗ Fi
FancyZoom meet jQuery // Ordered List // We Make The Web Beautifully Simple
A few days ago John posted a rewritten version of Cabel Sasser’s FancyZoom to work with Prototype and Scriptaculous. I took it upon myself to port it to jQuery, while making a few usability improvements. FIrst off, you can visit the demo to see the effect in action. It’s nearly identical in behavior to John’s original in Prototype. But the fancyZoom effect is added in a much more jQuery-like way.
なんかものが落ちるjQuery Plugin - JDropper作りました at HouseTect, JavaScripter Blog
Working with hugedomains.com was a quick and easy process. We got to speak to multiple real people located in Colorado without having to wait on hold! Our only complaint was we felt we had to overpay more than this particular domain was worth, and we weren't able to negotiate it down to a level that we felt was fair. However, payment and delivery were seamless, and within a few hours we had all of
HugeDomains.com
Captcha security check hisasann.com is for sale Please prove you're not a robot View Price Processing
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.idocsq.net/page/273