CSS3 animationライブラリまとめ
前回は、CSS3 animation アニメーションにつきまして、ソースコードを交えながら記載いたしました。
やはりページ作成初心者の方が「CSS3 animation」を完璧に覚えるのはキビシイものがあることと思います。しかしながら、せっかくウェブページを作っているのに、見た目がイマイチ、アニメーションでも付け加えることができればなぁ～、などとお思いの事でしょう。
ということで、今回は実際の制作現場で私が使用している、ページにアニメーションを組み込む際使用する、知ってているだけでとても便利な、CSS3 animationライブラリを3アイテムご紹介しようと思います。また、一般的な使い方と多少異なる部分をご説明したいと思います。
という事で、それでは今回はッ、
・MAGIC EFFECTS
・Hover.css
上記について記載していこうと思います…。
Animate.css
Animate.cssは要素にclassをつけるだけで、簡単にいろいろな種類のCSS3アニメーションを実装してくれる便利なスタイルシートになります。↑公式サイトより「デモ＆ダウンロード」をすることが可能です。
Animate.css 簡単な使い方
一般的な使用方法からご説明いたします。ます、head内でanimate.min.cssを読み込みます。
<link rel=”stylesheet” href=”animate.min.css”>
</head>
次に、要素にanimatedクラスの例えばbackInUpクラスをつけると、下から指定した要素があがってくるようなアニメーションが実行されます。
ここまでが一般的な使用方法になります。また、アニメーションの長さ、待機時間、繰り返し回数を指定する場合は、前回記載いたしましたanimation-duration、animation-delay、animation-iteration-countを使用すれば、簡単に使用することができますね。
要素が画面上にあわられたらアニメーション
私が実際によく使用するのはwow.jsというJavascriptのプラグインを使用して、要素が画面上にあわられたらアニメーションするように設定していることが多々ございます。wowjsは現在のヴァージョンは商用利用は有料となりますが、ヴァージョンが古いものであれば、MITライセンスで無料提供しているようです。
それではサンプルコードを記載してみます。
<!– 要素への指定は↑上記のように指定します –>
<script src=”js/wow.min.js”></script>
<script>new WOW().init();</script>
</body>
※一般的にはCSSとjsはhead内で読み込むと記載されている場合がございますが、私の場合jsは</body>タグ直前で読み込むことが多々ございます。これはファーストビューでjsの要素などが表示されない場合に限り、読み込み速度を少しでも早くするために最後に記載しています。
wowオプション一覧
| data-wow-duration | アニメーションの時間 |
|---|---|
| data-wow-delay | アニメーションがスタートするまでの時間 |
| data-wow-offset | アニメーションスタートの距離 |
| data-wow-iteration | アニメーション繰り返しの回数 |
私が記載する場合は、アニメーションの時間(data-wow-duration)とアニメーションがスタートするまでの時間(data-wow-delay)この2つの指定をおこなうことが多くなります。
また、今回は比較的簡単なwowjsを例に記載いたしましたが、jQueryで要素が画面内に入ったらアニメーションをスタートさせる方法もございます。しかしながら、今回は「animationライブラリまとめ」なので、jQueryの記事を記載する際に記載しようかと思います。
オススメするanimation.cssの記載方法
ここまで、Animate.cssとwowjsを使用してページ内にアニメーションを組み込む方法を記載いたしましたが、一般的には何らこの記載方法で問題ございません。しかしながら私が記載する方法は、Animate.cssから使用するアニメーションのみ抜き出して、通常のstyleを記載するCSSに記載しなおします。
「何故？メンドクサイじゃん！」と、お思いの方も初心者であればなおさらですが、多数いる事と思います。
理由は簡単で、表示速度およびSEO対策のひとつです。要は無駄なソースコードは使用しない！コレが比較的重要かと思います。
少し考えてみますと、クローラーは時間をかけてすべてのコードを読むという事を前提に考えてみますと、使用しないソースコードが記載されたままになっている！コレ無駄ですよね。「無駄がなく誤りのないソースコードの記載！」これが非常に重要だと思います。このことから、多少面倒に感じますが、使用するCSSのみ抜き出して記載しています。
ぜひ、初心者の方であればなおさら、アニメーションに慣れ理解度が深まるまでこの記載方法をおすすめいたします。
MAGIC EFFECTS
こちらも基本的には、Animate.cssの使用方法と一緒で、要素にMAGIC EFFECTSで指定するclassを付け加えるだけですね。個人的にはAnimate.cssで気に入ったアニメーションがない場合にMAGIC EFFECTSを使用することが多々ございます。また、こちらも先ほど同様使用するCSSのみ抜き出して、style.cssに記載しています。
また、やはり抜き出して記載するのは面倒だ！と思う方にもうひとつ重要な要素を記載いたしますと、前回記載いたしました「CSS3 animation」の理解度が抜き出して記載することにより、より深まることと思います。この理解度を深めることが重要で、「Animate.css」「MAGIC EFFECTS」のソースコードがあれば、これをカスタマイズしてオリジナルのアニメーションを作ることも容易に出来ることと思います。
しかしながら、一般的な使用方法である、すべてを<head>内で読み込みclassだけを付け加えるようコーディングをおこないますと、簡単にCSS3のアニメーションは実装できるものの、いつまでたってもCSS3 animationの本質を理解および覚えることは難しいかと思います。
それでは、こちらもAnimate.cssと同じようになってしまいますが、サンプルコードを記載いたします。
<link rel=”stylesheet” href=”magic.css”>
</head>
<body>
<div><img class=”magictime puffIn” src=”images/captionPfoto2.png” alt=””></div>
</body>
Hover.css
Hover.cssは、以前はMITライセンスの下で商用および非商用の両方で利用可能でした。v2.2.0（2017年3月24日）より前の商用使用のためにMITライセンスを取得した人は、同じライセンスでv2.2.0より前のバージョンのHover.cssを引き続き使用できます。
とのことですが、こちらはマウスオーバーに特化したCSS3になります。
こちらの使用方法は説明するまでもなく、疑似的クラスで:hoverでCSSをあて込めばイイだけですね。とっても簡単！！
参考までにsampleコードを記載いたします。
<link rel=”stylesheet” href=”hover-min.css”>
</head>
<body>
<div class=”button grow”>grow</div>
</body>
このHover.css、オフィシャルのソースコードを参照いただければCSS3の学習に役立つことと思います。また、ひととおり上記でアニメーションCSSの理解度が深まれば、さらに難易度の高いスライダーなどご自身で記載することができるようになる事と思います。
という事で今回は、CSS3 animationライブラリまとめをサンプルソースコードを交え記載いたしました。
分かってしまえば比較的簡単なことと思いますが、いちからアニメーションCSSを記載するのは比較的複雑かと思います。しかしながらこれも慣れで、色々なCSSがあることを理解し、どのように記載しているのか気にして色々なサイトを覗いてみますと、ここ数年は以前に比べCSSでアニメーションがおこなわれていることが、沢山見受けられることと思います。
サイト制作者に取りまして、サイトの表示速度、および、デバイスの多様化により今後なお一層CSSでのスタイリングスキルが求められてくることと思います。
とりあえず、今回はここまで…。
お仕事のご依頼は↓コチラより…、それではまた次回…。
- 投稿タグ
- css, CSS3, アニメーション, ライブラリ, Animate.css, MAGIC EFFECTS, Hover.css
