<head>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
<p>下にスクロールするとアニメーションします</p>
 <div class="wrap">
		<div class="box" animation="bounce">bounce</div>
		<div class="box" animation="flash">flash</div>
		<div class="box" animation="pulse">pulse</div>
		<div class="box" animation="rubberBand">rubberBand</div>
		<div class="box" animation="shake">shake</div>
		<div class="box" animation="swing">swing</div>
		<div class="box" animation="tada">tada</div>
		<div class="box" animation="wobble">wobble</div>
		<div class="box" animation="jello">jello</div>
		<div class="box" animation="heartBeat">heartBeat</div>
		<div class="box" animation="bounceIn">bounceIn</div>
		<div class="box" animation="bounceInDown">bounceInDown</div>
		<div class="box" animation="bounceInLeft">bounceInLeft</div>
		<div class="box" animation="bounceInRight">bounceInRight</div>
		<div class="box" animation="bounceInUp">bounceInUp</div>

		<div class="box" animation="fadeIn">fadeIn</div>
		<div class="box" animation="fadeInDown">fadeInDown</div>
		<div class="box" animation="fadeInDownBig">fadeInDownBig</div>
		<div class="box" animation="fadeInLeft">fadeInLeft</div>
		<div class="box" animation="fadeInLeftBig">fadeInLeftBig</div>
		<div class="box" animation="fadeInRight">fadeInRight</div>
		<div class="box" animation="fadeInRightBig">fadeInRightBig</div>
		<div class="box" animation="fadeInUp">fadeInUp</div>
		<div class="box" animation="fadeInUpBig">fadeInUpBig</div>
		
		<div class="box" animation="flip">flip</div>
		<div class="box" animation="flipInX">flipInX</div>
		<div class="box" animation="flipInY">flipInY</div>

		<div class="box" animation="lightSpeedIn">lightSpeedIn</div>

		<div class="box" animation="rotateIn">rotateIn</div>
		<div class="box" animation="rotateInDownLeft">rotateInDownLeft</div>
		<div class="box" animation="rotateInDownRight">rotateInDownRight</div>
		<div class="box" animation="rotateInUpLeft">rotateInUpLeft</div>
		<div class="box" animation="rotateInUpRight">rotateInUpRight</div>
		
		<div class="box" animation="slideInUp">slideInUp</div>
		<div class="box" animation="slideInDown">slideInDown</div>
		<div class="box" animation="slideInLeft">slideInLeft</div>
		<div class="box" animation="slideInRight">slideInRight</div>
		
		<div class="box" animation="zoomIn">zoomIn</div>
		<div class="box" animation="zoomInDown">zoomInDown</div>
		<div class="box" animation="zoomInLeft">zoomInLeft</div>
		<div class="box" animation="zoomInRight">zoomInRight</div>
		<div class="box" animation="zoomInUp">zoomInUp</div>
		
		<div class="box" animation="hinge">hinge</div>
		<div class="box" animation="jackInTheBox">jackInTheBox</div>
		<div class="box" animation="rollIn">rollIn</div>
</div>
</body>
p {
  text-align: center;
}
/*アニメ―ションする要素を非表示にする*/
.invisible {
	visibility: hidden;
}

.wrap {
	margin: 80vh 0 40vh;
	width: 100%;
	overflow: hidden;
}

.box {
	width: 150px;
	margin: 30px auto;
	padding: 10px;
	background: #005425;
	color: #fff;
	text-align: center
}
//アニメーション属性を持つ要素を非表示、animated属性を追加
$('*[animation]').addClass('invisible animated');

$(window).scroll(function () {
	$('*[animation]').each(function () {
    //アニメーションをさせる要素の上の位置
		var imgPos = $(this).offset().top;
    //ウインドウ上部の位置
		var scroll = $(window).scrollTop();
    //アニメーションを発火させる位置
		var position = imgPos - window.innerHeight + window.innerHeight / 5;

    //animation属性に記載されたアニメーション名を取得
    if (this.hasAttribute('animation')) {
        var animation = this.getAttribute('animation');
    }
    //発火位置まで来たら要素を表示し、アニメーションをclass名に追加
    if (scroll > position) {
			$(this).removeClass('invisible').addClass(animation);
		}
    //ページのトップまでスクロールしたら要素を非表示(リセット)
		if (scroll < 10) {
			$(this).removeClass(animation).addClass('invisible');
		}
	});
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.