仿 ISUX 图片动效

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
	<meta charset="UTF-8">
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="author" content="">
	<title>ISUX 图片动画</title>
	<script src="wow.min.js"></script>
</head>
<body>
	<style>
		.center {
			width: 1000px;
			margin: 0 auto;
		}
		.center img {
			display: block;
			margin-bottom: 10px;
		}
		/* 测试 clip-path 动画 */
		.clip_path_animate{
			-webkit-clip-path: inset(0 100% 0 0);
			clip-path: inset(0 100% 0 0);
			-webkit-animation: clip 0.8s forwards cubic-bezier(0,.3,.6,1);
			animation: clip 0.8s forwards cubic-bezier(0,.3,.6,1);
		}
		@keyframes clip{
			0%{
				clip-path: inset(0 100% 0 0);
			}
			100%{
				clip-path: inset(0 0 0 0);
			}
		}
		@-webkit-keyframes clip{
			0%{
				-webkit-clip-path: inset(0 100% 0 0);
			}
			100%{
				-webkit-clip-path: inset(0 0 0 0);
			}
		}
	</style>
	<div style="height: 1000px;"></div>
	<div class="center">
		<img class="wow" src="http://img.aibull.vip/?/1000x300" alt="">	
		<img class="wow" src="http://img.aibull.vip/?/800x300" alt="">	
		<img class="wow" src="http://img.aibull.vip/?/600x300" alt="">	
		<img class="wow" src="http://img.aibull.vip/?/400x300" alt="">	
		<img class="wow" src="http://img.aibull.vip/?/200x300" alt="">	
	</div>
	<div style="height: 1000px;"></div>

	<script>
		var wow = new WOW({
			boxClass: 'wow', // animated element css class (default is wow)
			animateClass: 'clip_path_animate', // animation css class (default is animated)
			offset: 200, // distance to the element when triggering the animation (default is 0)
			mobile: true, // trigger animations on mobile devices (default is true)
			live: true, // act on asynchronously loaded content (default is true)
			callback: function(box) {
			  // the callback is fired every time an animation is started
			  // the argument that is passed in is the DOM node being animated
			},
			scrollContainer: null // optional scroll container selector, otherwise use window
		});
		wow.init();
	</script>
</body>
</html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注