Glacial Webwork : 駆け出し未満のデザイナー(自称)のお勉強ブログ。

誰でも手軽にアニメーション!animate.cssの使い方

animate.cssを使えば、初心者の方でもWebページに気軽にアニメーションをつけることができます。と言ってる私自身も初心者のわけですが(-_-;)笑

 

主にできることとして・・・

要素をフェードイン・フェードアウト

要素を上下左右、好きな方法から移動させる

要素を回転させる、ズームイン、ズームアウト

などなど。

 

Web絡みの知識を持っていないクライアントさん(とやはり知識を持っていない会社の同僚、上司、社長)からすると、演出として「おぉ!」とくるものだったらしく、なかなか高評価です。使い方、もとい種を明かせば、あまりに簡単なものなのですが・・・。

製作者の方には頭が下がる思いです。


animate.cssを実装する

animate.cssをダウンロードします。あとは普通のCSSと同じ要領でanimate.cssを呼び出してあげます。

<link rel=”stylesheet” href=”animate.css”>

以上。

 

animate.cssを使ってみる

アニメーションさせたい要素に対して、classを指定してあげます。

classに「animated “アニメーション名”」の形で記述してあげるだけです。公式サイトでもアニメーションの例を見ることができるので、初心者の方でも視覚的に非常に分かりやすいと思います。

 

<html>
<body>
<div class=”animated fadeIn”>HTMLなどの練習用として、Glacial WebWorkのブログを始めました。まだまだ分からないことだらけです><<br />
animated fadeInで要素がフェードインしてくれます。</div>
</body>
</html>

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA