搜索

当前位置:首页 > 全栈分享 > JavaScript > 正文

随页面滚动动态加载内容的实现方法

发布时间:2018-03-07 21:35:19作者:魏义齐阅读:()

本文为博主原创文章,未经博主允许不得转载。

近几年很多新式网站都有随页面滚动动态加载内容的效果,这个效果是如何实现的呢,分三个步骤。

第一步:scrollreveal.js

在头部引用这个js,网上有很多,大家可以去下载,下面是我提供的:

https://pan.baidu.com/s/1racCByk

第二步:在</body>之前加上下面这段js
  1. <script> 
  2.     if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {//判断是否为IE浏览器,如果不是,则: 
  3.         (function () { 
  4.             window.scrollReveal = new scrollReveal({reset: true});//运行页面滚动显示动画js 
  5.         })(); 
  6.     } 
  7.     ; 
  8. </script> 
有注释,大家一看都明白。

第三步:在需要有动效的div标签里加上data-scroll-reveal="enter top over 1s after 0.5s",这句代码意思是当页面滚动到这个盒子0.5s之后盒子从上方淡入。enter后面有top、right、bottom、left。

效果见本站首页的“全站推荐”和“友情链接”。

本文标签:,您可以阅读与「」相关的所有文章

魏义齐全栈技术交流:魏义齐全栈技术交流

相关阅读

    无相关信息

上一篇:如何让一个div块在页面滚动到其出现之后在当前窗口的位置不再发生变化下一篇:slide Toggle()方法如何先后执行两次

赞助本站

原创不易,您的赞助就是博主更新的动力!

赞助本站可在赞助光荣榜留下外链信息,支付宝扫此二维码可领红包