[CSS] Animate.cssでアニメーション効果をつける-1

2019年3月16日2021年9月8日

※Animate.cssがv4になり、変更がありました。[CSS] Animate.css v4 スクロールで動かす (初心者も）　で紹介しています。

Animate.cssはclassを付けるだけで簡単にアニメーション効果を付ける事が出来ます。簡単と言っても、何だかんだ作業が必要になるので、初心者にも分かる様にもう少し細かく書こうと思います。

追記：この方法の他、スクリプトに詳しくない人に簡単な方法を「Animate.cssでアニメーション効果をつける-2」も紹介しています。

INDEX

Animate.cssを入手する

Animate.css

でも、ここで入手しなくても実は大丈夫です。

このページでは、後に使用するclass名と動作の確認をして下さい。ドロップダウンで選んで、[Animate it]をクリックすると、動作確認をする事が出来ます。

head内にファイルをリンクする

hederにanimate.cssをリンクします。先程のサイトからダウンロードしたcssをあなたのサイトに置いてリンクしても良いですし、下記の様にネット上のファイルにリンクしてもOKです。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">

ソースを書く

例えば、「Animate.cssでアニメーションで素敵なサイトを作ろう！」の文字をゆらゆら揺らしてみます。Animate.cssのサイトで確認し、classはswingを使う事が分かりました。アニメーションを動か素には、もう一つ animated　を加えます。

<p class="animated swing">Animate.cssでアニメーションで素敵なサイトを作ろう！</p>

スクロールした時にアニメーション開始させる

次に、オプションとしてスクロールして該当箇所が表示された時にアニメーション開始させる様にします。

head内にjsをリンクします。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"</script>

そして、スクリプトをheaderにリンクします。

あわせて読みたい

Tutorial | DigitalOcean Technical tutorials, Q&A, events — This is an inclusive place where developers can find or lend support and discover new ways to contribute to the community.

文字が下から上がってくるfadeInUpのアニメーションを作ってみましょう。
scroll-animationsと、実際に下から上がってくる文字にはanimatedを付けて下さい。

<div class="scroll-animations">
<ul>
<li class="animated">Animate.cssでアニメーションで素敵なサイトを作ろう！</li>
<li class="animated">スクロールで動くように作ろう！</li>
<li class="animated">ほゎ～っと下から文字が出る様にしよう！</li>
</ul>
</div>

head内にスクリプトを書きます。

<script>
$(document).ready(function() {
  // Check if element is scrolled into view
  function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
  }
  // If element is scrolled into view, fade it in
  $(window).scroll(function() {
    $('.scroll-animations .animated').each(function() {
      if (isScrolledIntoView(this) === true) {
        $(this).addClass('fadeInLeft');
      }
    });
  });
});
 </script>

下の方に(‘fadeInLeft’)とありますが、好きに書き換えて下さい。
上記の様にすると、自動的に class=”animated fadeInUp” となる様です。

ボタンにマウスオーバー(hover)の時に動かす

マウスを乗せると一瞬ボタンが大きくなるpulseを例にします。classにはanimatedだけしか付けません。

<div class="btn animated" ><a href="#" >続きを読む</a></div>

CSSを書きます。

.animated a:hover{animation: pulse 1s infinite;}
.btn a {
    background-color: #7094AE;
	font-weight:bold;
    display: inline-block;
    margin-left: 6px;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 3px;
    text-decoration: none;
    color: #fff;
}
.btn a:hover {
    background-color: #109DAC;
}

よかったらシェアお願いします