2014-05-24

cssだけでカッチョイイアニメーションをさせるAnimate.cssメモ

Animate.css がとても簡単に使える上に良いので、備忘録としてメモ。
CSS3、すごいですよね。box-shadowとか、グラデーション関連とか、アニメーションなどなんかphotoshopみたいになってる気がします。

使い方

非常に簡単です。適用したいタグにクラスを2つ追加するだけ。

<div class="animated bounce">
つよい
</div>

これだけでokです。

入れ方としては

 <div class="animated(必須) アニメーション名(詳しくはanimate.css)">
わかる
</div>

でOKです。クラスは大文字と小文字が区別されるので、bounceInUpのIとかUとかは気を付けた方が良いでしょう。

なお、このアニメーションはページを開いたときにすぐ実行されるので、内容量が多くて下のほうにもアニメーションがあったとしても、開いたときに実行されます。そういうときはwow.jsを使いましょう。

あと、hoverしたときにアニメーションをさせたいと思う人も居ると思います。ほかにも、delayを追加したいなど。そんなときにはSASS(scss)を使えば解決できます。scss記法については次の記事で書きます。

とりあえずかなり優秀なフレームワークです。jsを使わなくて良いところは大きいでしょう。ホームページのコンテンツにちょっとアクセントを付けたいときなどに使うと良いでしょう。

結論

よい

リンク

Animate.css

デモ

デモページ (というよりデモじゃなくて本番)animate.cssを使っています。

2014-05-24

wow.jsでスクロールに合わせてアニメーション(animate.css)をするメモ

前回animate.css(cssだけでカッチョイイアニメーションをさせるAnimate.cssメモ - kurotei databook)を紹介しましたが、今回はその派生というか補佐であるWOW.jsについて紹介します。Animate.cssではページを開いたときにすべてのアニメーションを行ってしまうのですが、このWOW.jsを使えばスクロールしてコンテンツが画面に入った時にアニメーションさせることができます。
すごいホームページがかわいいです。ぼくはすきだよ

使い方

これまた簡単です。
まず、wow.jsをインストールします。そして、プログラムに読み込ませます。

<script src="js/wow.js"></script>
<script>
   new WOW().init();
</script>

こんな感じです。次にアニメーションさせたいタグにクラスを組み込みます。

<section class="wow(必須) fadeInRightBig(アニメーション名)">
これすき
</section>

こんな感じです。sectionを使った意味は特にありません。sectionの使い方わかりません。
クラスの大文字小文字は区別されますから、注意して書きましょう。アニメーション名はAnimate.cssを参考にしてください。
あと、前回のAnimate.cssではanimatedをクラスに入れましたが、WOW.jsを使ってアニメーションをさせる場合はanimetedは要りません。
また、ページを開いたときにすでに画面に入っている(最初から表示される)コンテンツにはWOW.jsよりAnimate.cssの方を使った方がよいでしょう。wow.jsだとアニメーションしなかったりします。