55
67

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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ページの印象を変える

1分実装

アニメーションさせたい要素に対してclassを設定します。
classに"アニメーション名"と"animated"を追加します。
おわり!

<body>
	<p class="font1 rubberBand animated">
        1分で実現できる有用な技術 Advent Calendar 2015
    </p>
</body>

アニメーションの設定

上記の1分実装ですと、ページが読み込まれてすぐにアニメーションが1回のみ実行されたと思います。
開始を遅らせたり、繰り返し回数を指定したりできます。

css設定部分
<style type="text/css">
        body{
            font-size:2em;
        }
        .font1{
            font-family: 'Alegreya Sans', sans-serif;
            animation-delay:2s; //2秒遅延して実行
            animation-iteration-count: 3; //3回繰り返す
//            infiniteを指定すると連続
//            animation-iteration-count: infinite;
        }
    </style>

イベントに連動して実行

ここからはもう1分超えると思いますが…。
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を使ってサイトにアニメーションをつける

55
67
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
55
67

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?