网格图片动画效果源码

最新推荐文章于 2021-06-03 05:31:09 发布

cwzhsi

最新推荐文章于 2021-06-03 05:31:09 发布

阅读量642

点赞数

分类专栏： css 文章标签： Grid animation css3 jquery easing

本文链接：https://blog.csdn.net/cwzhsi/article/details/47804195

版权

css 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

实现的代码比较简单，主要是用到了JQuery Easing。

JQuery在一些页面滚动效果、幻灯片切换等场景应用比较多。它是在JQuery原有的效果上进行了扩展，所以使用时可以根据JQuery原有的动画函数进行扩展。

（1）JQuery默认动画

支持toggle() slideUp() slideDown() show() hide()等Jquery内置的动画效果，使用如下：

     $(element).slideUp({ 
		duration: 1000,  
		easing: method,  
		complete: callback 
       });

（1）使用JQuery自定义动画函数animate()

JQuery Easing 结合JQuery的自定义动画函数animate()可以制作各种你想要的动画效果，例如：

    $(element).animate({ 
		height:500, 
		width:600 
       },{ 
		easing: 'easeInOutQuad', 
		duration: 500, 
		complete: callback

});

实现图片动画效果的jquery easing 结合animate的例子如下：

         $(this).delay(d).animate({
			opacity:1
		},
		{
			step: function(n) {
			//rotating the images on the Y axis from 360deg to 0deg
			ry = (1 - n) * 360;
			//translate images from 1000px to 0px
			tz = (1 - n) *1000;
			//applying the transformaton
			$(this).css('transform', 'rotateY('+ ry+'deg)translateZ(' + tz + 'px)');
		},
		easing:'easeOutQuint',
		duration: 3000
	})

完整的源码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Grid-animation-efforts</title>
	<style type="text/css">
		* {
			margin:0;
			padding:0;
		}
		body {
			text-align:center;
			overflow:hidden;
		}
		.grid {
			width:600px;
			height:300px;
			margin:100px auto 50px auto;
			perspective:500px;
		}
		.grid img {
			float:left;
			width:60px;
			height:60px;
		}
		.animate {
			font:12px Montserrat;
			text-transform: uppercase;
			background:rgb(0,100,0);
			color:white;
			padding:10px 20px;
			border-radius:5px;
			cursor:pointer;
		}
		.animate:hover {
			background:rgb(0,75,0);
		}
	</style>
</head>
<body>
	<div class="grid"></div>
	<span class="animate">Animate</span>
	<!-- jQuery -->
	<script src="http://thecodeplayer.com/u/js/jquery-1.9.1.min.js" type="text/javascript"></script>
	<!-- jQuery easing plugin -->
	<script src="http://thecodeplayer.com/u/js/jquery.easing.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		var images = "",
			count = 50,
			d = 0,//delay
			ry,tz,s;//transform params
		for(var i = 1; i <= count ; i++) {
			images += '<img src="http://thecodeplayer.com/u/uifaces/' + i +'.jpg">';
		}
		$('.grid').append(images);

		$('.animate').on('click', function() {
			//fading out the thumbnails with style
			$('img').each(function() {
				d = Math.random() * 1000;
				$(this).delay(d).animate({opacity:0},{
					step:function(n) {
						s = 1 - n;
						$(this).css('transform', 'scale(' + s + ')');
					},
					duration: 1000
				})
			}).promise().done(function() {
				//after "promising and doing the fadeout animation we will bring the imags back"
				storm();
			})
		})
		function storm() {
			$('img').each(function() {
				d = Math.random() * 1000;
				$(this).delay(d).animate({
					opacity:1
				},
				{
					step: function(n) {
						//rotating the images on the Y axis from 360deg to 0deg
						ry = (1 - n) * 360;
						//translate images from 1000px to 0px
						tz = (1 - n) *1000;
						//applying the transformaton
						$(this).css('transform', 'rotateY('+ ry+'deg)translateZ(' + tz + 'px)');
					},
					easing:'easeOutQuint',
					duration: 3000
				})
			})
		}
	</script>
</body>
</html>

页面图：

cwzhsi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网格图片动画效果源码

实现的代码比较简单，主要是用到了JQuery Easing。JQuery在一些页面滚动效果、幻灯片切换等场景应用比较多。它是在JQuery原有的效果上进行了扩展，所以使用时可以根据JQuery原有的动画函数进行扩展。（1）JQuery默认动画支持toggle() slideUp() slideDown() show() hide()等Jquery内置的动画效果，使用如下：
复制链接

扫一扫

专栏目录