ウェブサイトにアニメーション効果を加えるとこんな感じになるよ!

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

文字や画像にアニメーション効果を加えると
インパクトを与えることができます。

文字が跳ねたり、ボタンが震えたり、
そんな効果をCSSやJavaScriptを使って
手軽に実装することができます。

今回はCSSライブラリーを提供してくれている
Animate.cssをご紹介させて頂きます。

Animate.css

Animate.css

Animate.css

こちらのサイトにアクセスすると、
どの様な効果を得られるのかデモを見ることができます。

文字が跳ねたり、点滅したりなどなど。

Animate2

こちらからエフェクト名を選択してみて下さい。
そうすると選択したアニメーションが「Animate.css」という文字に
表現されて確認することができます。

実際の使い方としては、animated というクラス名と共に、
各エフェクトのクラス名を加えればアニメーション効果が表現されます。

アニメーション効果を繰り返し表示したい場合は
infinite クラスを追加すれば、繰り返して表示されます。

今回はCSSを使ったアニメーション効果の方法をご紹介させて頂きました。

手軽に面白い効果を加えることができますが、
やり過ぎるとうざったく感じる方もいると思いますので、
まずは試しにどの様な効果を付けれるのか見て頂き、
一番効果的な使い方を考えてアクセントとして使ってみると
面白いのではないかなと思います。

是非試してみて下さいね。

mt

起業初年度1000万円、その後ゆるやかに年商3000万円までを目標に起業に向けて一歩を踏み出したい方向けの起業専門メルマガです。最新のノウハウを始め、セミナーや限定サービスのご案内をご希望の方は今すぐ下記フォームより、メインで使っているメールアドレスをご登録下さい。家族との時間を大切にしながら自由自在に収入を増やせる起業家になる方法を余すことなくお伝えいたします。

メールアドレス(必須)

コミュニティ