※Animate.cssがv4になり、変更がありました。[CSS] Animate.css v4 スクロールで動かす (初心者も） で紹介しています。
Animate.cssはclassを付けるだけで簡単にアニメーション効果を付ける事が出来ます。簡単と言っても、何だかんだ作業が必要になるので、初心者にも分かる様にもう少し細かく書こうと思います。
追記：この方法の他、スクリプトに詳しくない人に簡単な方法を「Animate.cssでアニメーション効果をつける-2」も紹介しています。
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;
}
コメント ※ハンドルネームでお願いします