» スクロール時にCSS3 Animationsを一時停止したらFPSがけっこう良くなった | negic
パララックスなサイトを作る際に、スクロールに応じてJSで要素を動かすと思うのですが、その時にある場所でCSS3 Animationsが動いていると、スクロールがカクついてしまい、FPSが残念な状態になります。 そこで、スクロールが動き出した時にCSS3 Animationsを止めて、スクロールを止めた時にCSS3 Animationsを再度動作させるという処理を加えれば、スクロールがカクつくことなく、スムーズになります。 スクロールや、リサイズといったJavaScriptのイベントは連続で処理されます。そういったイベントの「開始した時」「動作している時」「停止した時」の状態が取れるjQueryのプラグインを作成しました。 jQuery.MovingState このプラグインを使い、CSS3 Animationsを動的に操作してみたいと思います。 CSS3 Animationsを一時的に停止
Pure CSS3 typing animation with steps() • Lea Verou
steps() is a relatively new addition to the CSS3 animations module. Instead of interpolating the values smoothly, it allows us to define the number of “frames” precisely. So I used it to create headers that have the well-known animated “typing effect”: As you can see, the number of characters is hardcoded in the steps() function, but that’s the only place. Everything else is totally flexible. Apar
Virgo - DHTML
ここでは Macromedia Flash のモーション設定にあるイージングを考慮した移動を数学的に分析し、実際にどのようなアルゴリズムなのかを調べていきたいと思います。 イージング移動については Class Library の Edging Mover クラスを参考にして下さい。実際にどのような動作をするのかは イージング移動サンプルが参考になると思います。 これらのページでも述べていますが、イージングとは「オブジェクトが移動するときのコマ割を決めるもの」です。直線的に移動させるとき、単に等速で移動させるのではなく、加速度を考慮したアニメーションが可能になります。JavaScript は連続的な動きは実現できず、このコマ割を変えることは非常に重要で強力なものとなります。 では、実際にイージングを考慮した直線移動について調べていきたいと思いますが、上述した通り重要なのは「コマ割」です。この
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
