今日の人気記事

  1. 画像ポップアップ・スライドショー「colorbox」
  2. 時間入力を補助する「timepicker」
  3. レスポンシブな画像ポップアップ Lightbox「Magnific Popup」
  4. 画像のドラッグを実装「JQ Image Drag」
  5. 現在時刻も表示できるカウントダウン・タイマー「countdownTimer」

要素にアニメ効果を実装 - フェードイン、シェイク、バウンス…「CSS3 Animate It」

スポンサーリンク

指定した要素にアニメ効果を実装するプラグイン「CSS3 Animate It」を紹介します。

jQueryプラグイン「CSS3 Animate It」

このプラグインを使えば、フェードイン、シェイク、バウンス……などなど、ありとあらゆるアニメーションをWebサイトに作成することができます。

また、要素を指定するだけなので簡単に実装することができます。

スポンサーリンク

デモページで、いくつかのアニメーションをご覧ください。

「CSS3 Animate It」のデモ

ソース( HTML + jQuery )

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="CSS3 Animate It のデモでーす。">
<title>CSS3 Animate It - jQueryプラグイン</title>
<link rel="stylesheet" href="css/animations.css" type="text/css">
</head>
<body>
<div class='animatedParent'>
  <h1 class='animated bounceInDown'>CSS3 Animate It のデモでーす</h1>
	<h2 class='animated fadeInLeft'>フェードイン</h2>
	<h2 class='animated shakeUp'>ぷるぷる震える</h2>
	<h2 class='animated bounceInDown slowest'>上からびょーん</h2>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src='js/css3-animate-it.js'></script>
<script>
$(document).ready(function(){
  $.doTimeout(2500, function(){
    $('.repeat.go').removeClass('go');
    return true;
  });
  $.doTimeout(2520, function(){
    $('.repeat').addClass('go');
    return true;
  });
});
</script>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)