本記事では、Webサイト上で背景色をアニメーションにする方法をご紹介します。
使用するのはjQueryのスクリプトですが、とてもシンプルなもので、これを使えば背景色をループ状にアニメートすることができます。
このアニメーションはデスクトップでもタブレットでもモバイルでもスムーズに動くので、とても使い勝手がよいですよ！
使用するJavaScript
・jQuery
・jQuery UI
・animated_bg.js
やり方
１・スクリプトを入れる
必要なJavaScriptをページに入れます
２・animated_bgクラスを追加
背景色アニメーション機能を入れたい箇所のエレメントに、animated_bgクラスを付け足します。html、ボディ、リンク、ヘディング、div、フォームエレメントなど、基本的にどのエレメントにも使えます。
３・色をカスタムする
好きな色やアニメーションのスピードを指定します。下のサンプルコードを参考に、好きな色を好きなだけ追加したり、アニメーションスピードを調整したりしてみてください。
CSSフォールバック
CSSでは、エレメントの背景色をアニメーション開始時の色とそろえるようにしてください。Ja
スポンサーリンク
デザイナー必見！jQueryスクリプトを使って背景色をアニメーションにする方法
マーケティング最新
コメント