现在很多网站用到的图片加载时淡出效果,它是怎么实现的?下面我们用Loading Effects for Grid Items来实现这个效果。
引用
<script src="js/masonry.pkgd.min.js"></script> <script src="js/imagesloaded.js"></script> <script src="js/classie.js"></script> <script src="js/AnimOnScroll.js"></script>
html
<ul class="grid effect-4" id="grid"> <li><a href="http://drbl.in/fWMM"><img src="images/1.jpg"></a></li> <li><a href="http://drbl.in/fWPV"><img src="images/2.jpg"></a></li> <li><a href="http://drbl.in/fWMT"><img src="images/3.jpg"></a></li> <li><a href="http://drbl.in/fQdt"><img src="images/4.png"></a></li> <!-- ... --> </ul>
css
/* Effect 4: fall perspective */ .grid.effect-4 { perspective: 1300px; } .grid.effect-4 li { transform-style: preserve-3d; } .grid.effect-4 li.animate { transform: translateZ(400px) translateY(300px) rotateX(-90deg); animation: fallPerspective .8s ease-in-out forwards; } @keyframes fallPerspective { 100% { transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; } }
animation-duration: 0.69993s;" class="animate",这个样式就没加在html上,我用的是vue
回复您好,非常感谢您的回答,另外也非常感谢您的插件。 昨天一直在倒腾这个插件,一直不成功,可能在您打开我的页面的时候,我在来回的测试,所以没看到。 现在整好了,再次感谢您的插件。但是发现几个问题:http:***.首先 我发现我的这个页面打开后那些图片就会全部进行下载,不是滚动到哪里哪里的图片再下载,不知道是我没弄好还是就是这样设计的,谢谢! 2.我发现几个浏览器打开不正常,我测试了6个浏览器,把情况说一下: 1、 百度浏览器极速模式打开校花模板 排列正常。 兼容模式 图片排列错位。2、 360浏览器极速模式打开 排列正常。 兼容模式打开 排列错位。 3、 IE浏览器排列错位 4、 世界之窗浏览器排列错位 5、 GOOGLE浏览器排列正常 6、 火狐浏览器排列正常
回复