1分シリーズです。
Webページにちょっとしたアニメーションを追加することで見栄えを良くしましょう。
Animate.cssを利用すると手軽にアニメーションを実装できます。
実装準備
Animate.cssをダウンロードして通常のCSSと同じように読み込みましょう。
それだけ。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="author" content="">
<meta name="copyright" content="">
<!-- <link rel="shortcut icon" href="/favicon.ico"> -->
<link rel="index" href="/">
<!-- CSS -->
<style type="text/css">
body{
font-size:2em;
}
.font1{
font-family: 'Alegreya Sans', sans-serif;
}
</style>
<!-- webfonts -->
<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans' rel='stylesheet' type='text/css'>
<!-- Animate.cssを読み込む -->
<link href='css/animate.css' rel='stylesheet' type='text/css'>
</head>
Webフォントってなんやねんという方は前回の記事も是非どうぞ。
Webフォントで手軽にWebページの印象を変える
１分実装
アニメーションさせたい要素に対してclassを設定します。
classに"アニメーション名"と"animated"を追加します。
おわり！
<body>
<p class="font1 rubberBand animated">
1分で実現できる有用な技術 Advent Calendar 2015
</p>
</body>
アニメーションの設定
上記の１分実装ですと、ページが読み込まれてすぐにアニメーションが１回のみ実行されたと思います。
開始を遅らせたり、繰り返し回数を指定したりできます。
css設定部分
<style type="text/css">
body{
font-size:2em;
}
.font1{
font-family: 'Alegreya Sans', sans-serif;
animation-delay:2s; //2秒遅延して実行
animation-iteration-count: 3; //３回繰り返す
// infiniteを指定すると連続
// animation-iteration-count: infinite;
}
</style>
イベントに連動して実行
ここからはもう１分超えると思いますが…。
JavaScriptと組み合わせるとクリックなどのイベントをトリガーにアニメーションを実行できます。
head内にJavaScriptを追加しています。（jQuery使用）
ほぼAnimate.cssにあるサンプル通りですが。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="author" content="">
<meta name="copyright" content="">
<!-- <link rel="shortcut icon" href="/favicon.ico"> -->
<link rel="index" href="/">
<!-- CSS -->
<style type="text/css">
body{
font-size:2em;
}
.font1{
font-family: 'Alegreya Sans', sans-serif;
animation-delay:1s;
animation-iteration-count: 2;
}
</style>
<!-- webfonts -->
<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans' rel='stylesheet' type='text/css'>
<link href='css/animate.css' rel='stylesheet' type='text/css'>
<!-- script -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
$('#animation').click(function(e){
e.preventDefault();
$('#animation').removeClass().addClass('font1 rubberBand' + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
$(this).removeClass();
});
});
});
</script>
</head>
<body>
<p class="font1 rubberBand animated">
1分で実現できる有用な技術 Advent Calendar 2015
</p>
<p id="animation" class="font1">
1分で実現できる有用な技術 Advent Calendar 2015
</p>
</body>
</html>
シンプルなアニメーションならclass指定だけででき、イベントとの連動もjsで手軽にできます。
wow.jsと連動
応用編としてwow.jsとの連携を紹介します。
wow.jsというjsライブラリとAnimate.cssを使うとスクロールをトリガーにアニメーションを開始できるようになります。
最近良く見るスクロールしていくとポコポコとコンテンツが出てくるようなページを手軽に作れます。
こちらの記事が非常に参考になります。
Animate.cssとwow.jsを使ってサイトにアニメーションをつける