Category
Archives
Cocotiie
2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)・・・ここちいい(笑)として運営開始。

Trial And Errorの精神で勉強中です。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。
テーマをSWELLにしてリニューアルしましたSWELLについて

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

※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にリンクします。

文字が下から上がってくる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;
}
よかったらシェアお願いします

コメント

コメントする

INDEX
閉じる