Animate.css デモ & スクロール/マウスオーバーでアニメーション

HTML要素に簡単にアニメーションを追加できるプラグイン「Animate.css」のデモです。
Animate.cssを使用するには animate.min.css（または animate.css）を読み込むだけ。

CDNはこちら ↓↓↓

<link rel="stylesheet" <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">

アニメーションを適用する

xxxxx の部分は適用するアニメーションの名前を記述します。デモページを参照してください。

<img class="foobar animate__animated animate__xxxxx" alt="">

.foobar {
	animation-duration: 0.5s;
	animation-delay: 1.25s;
}

:hover {
	animation: jello;
	animation-duration: 1s;
}

【手っ取り早い】プラグインで用意されているヘルパークラスを使用する場合

<img class="animate__animated animate__xxxxx" alt="">

自分でクラスを用意する場合

クラス名は何でもいいです。FadeIn系は Opacity:0 がらみで調整が難しいです。

<img class="animate-xxxxx" alt="">

.animate-xxxxx {
	animation: xxxxx;
	animation-duration: 1s;
}

ユーティリティクラス

開始時間、スピード、繰り返し用にクラスがあらかじめ準備されていますので必要に応じて追加します。

遅延

animate__delay-1s
animate__delay-2s
animate__delay-3s
animate__delay-4s
animate__delay-5s

デフォルトでは1～5秒の遅れですが、カスタマイズするにはスタイルシートで –animate-delay プロパティを調整します。

CSS

/* 開始まで2倍遅れにする場合 */
:root {
  --animate-delay: 2s;
}

/* 開始まで半分の速さにする場合 */
:root {
  --animate-delay: 0.5s;
}

スピード

animate__slow
animate__slower
animate__fast
animate__faster

繰り返し

animate__repeat-1
animate__repeat-2
animate__repeat-3
animate__infinite //無限

スクロールでアニメーションを追加する

1. フェードイン系のアニメーションを非表示にしておく

下記をスタイルシートに追加しておいてください。

CSS

[data-animate*=fade] {
	opacity: 0;
}

2. アニメーションのタイプを data-animateに、遅延がある場合は data-delayに入れておく

HTML

<img data-animate="fadeInUp" class="animate__delay-1s" src="./tiger3.png" alt="">

3. jQueryを記述

アニメーション要素が表示されたらクラスを追加します。
jQuery 本体も読み込んでください！

発火が速い/遅い と感じる場合は 50 の数値を変更してください。

jQuery

$(window).on('scroll', function () {
	$('[data-animate]').each(function () {
		var elemPos = $(this).offset().top-50;
		var scroll = $(window).scrollTop();
		var wHeight = $(window).height();
		var $this = $(this);
		if(scroll >= elemPos - wHeight) {
			$this.addClass('animate__animated animate__' + $this.data('animate'));
		} else {
			$this.removeClass('animate__animated animate__' + $this.data('animate'));
		}
	});
});

マウスオーバー（:hover）でアニメーションを追加

任意のクラス名をつけてCSSでアニメーションを適用します。

HTML

<img class="hover-xxxxx" src="./images/tiger3.png" alt="">

CSS

.hover-xxxxx:hover {
	animation: heartBeat;
	animation-duration: 1s;
}

ページの読み込み（ロード）が終わってからアニメーションさせる

JQuery

$(window).on('load', function(){
    setTimeout(function(){
      $('.aaa, .bbb').addClass('is-show');
    },100);
});

CSS

.aaa,
.bbb {
	display: none;
	opacity: 0;
	&.is-show {
		display: block;
		opacity: 1;
	}
}

関連記事