[ScrollReveal] スクロールアニメーションを実装したい – ソフトウェアエンジニアの技術ブログ：Software engineer tech blog

ブラウザをスクロールするとアニメーションが動くやつを実装したい。
ScrollRevealというので実装できるらしいので試してみる。

Github: https://github.com/jlmakes/scrollreveal/tree/master

<body>
	<div class="container">
		
		<br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br>
		<h1 class="headline">Widget Inc.</h1>
	</div>
	<script src="https://unpkg.com/scrollreveal"></script>
	<script>
		var ScrollrevealFade = {
		    origin: 'left',
		    distance: '0px',//移動範囲
		    scale: 1,//拡大表示（１で横スクロールが始まる）
		    rotate: { x: 20, y: 20, z: 20 }, //
		    duration: 1200, //アニメーションの速度
		    delay :200 //要素が表示するまでの待機時間（ディレイ）
		};
		ScrollReveal().reveal('.headline', ScrollrevealFade, 100);
	</script>
</body>
</html>

スクロール(表示位置に入る)と、アニメーションが入ります。
この例だと、上から降ってくる感じ。

なるほど、面白い。