読者です 読者をやめる 読者になる 読者になる

Webサイト専門プログラマの言いたい放題

元システムエンジニアがサイト制作とプログラミングについて好き放題しゃべります。

【CSS/jQueryアニメーションの基本原理】

f:id:wp-lesson:20170127113705j:plain

CSSJavaScript(jQuery含む)のセレクタを使って
HTMLタグにスタイルシートを設定すると、
ブラウザの表示に変化が起こりますね。
 
その変化を、最初から発生させるのではなくて、
ユーザーの操作やページの表示状態が変わった
タイミングで発生させるのが原理です。
 
直接style属性を変化させても、
class属性を変化させても同じことです。
 
根本は、スタイルシートの設定の変更です。
 
そこに「時間差」を追加すると、アニメーションが
滑らかになります。
 
CSSなら transitionプロパティで指定し、
jQueryなら animation() 関数で指定しますが、
 
どちらも内部的にはブラウザにタイマーのような
仕掛けを予約して、一定の時間をかけて緩やかに
スタイルシートの設定値を開始値から終了値へと
変化させることによってアニメーションします。
 
この原理を頭の隅に入れておけば、
広い応用力が備わります。