当前位置：首页 > 全栈分享 > JavaScript > 正文
随页面滚动动态加载内容的实现方法
发布时间：2018-03-07 21:35:19作者：魏义齐阅读：()
近几年很多新式网站都有随页面滚动动态加载内容的效果，这个效果是如何实现的呢，分三个步骤。
第一步：scrollreveal.js
在头部引用这个js，网上有很多，大家可以去下载，下面是我提供的：
https://pan.baidu.com/s/1racCByk
第二步：在</body>之前加上下面这段js
第三步：在需要有动效的div标签里加上data-scroll-reveal="enter top over 1s after 0.5s"，这句代码意思是当页面滚动到这个盒子0.5s之后盒子从上方淡入。enter后面有top、right、bottom、left。
效果见本站首页的“全站推荐”和“友情链接”。
第一步：scrollreveal.js
在头部引用这个js，网上有很多，大家可以去下载，下面是我提供的：
https://pan.baidu.com/s/1racCByk
第二步：在</body>之前加上下面这段js
有注释，大家一看都明白。
- <script>
- if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {//判断是否为IE浏览器，如果不是，则：
- (function () {
- window.scrollReveal = new scrollReveal({reset: true});//运行页面滚动显示动画js
- })();
- }
- ;
- </script>
第三步：在需要有动效的div标签里加上data-scroll-reveal="enter top over 1s after 0.5s"，这句代码意思是当页面滚动到这个盒子0.5s之后盒子从上方淡入。enter后面有top、right、bottom、left。
效果见本站首页的“全站推荐”和“友情链接”。
魏义齐全栈技术交流：
相关阅读
-
无相关信息
上一篇：如何让一个div块在页面滚动到其出现之后在当前窗口的位置不再发生变化下一篇：slide Toggle()方法如何先后执行两次
赞助本站
原创不易，您的赞助就是博主更新的动力！
赞助本站可在赞助光荣榜留下外链信息,支付宝扫此二维码可领红包
最新会员
-
weiyiqi
- 网站防扒的一般措施（2188）
- js实现刷新页面所有微信号同步变化的效果（1680）
- 用swiper4给博客首页配置的一个3D方块切换轮播图（895）
- 随页面滚动动态加载内容的实现方法（876）
- 网站通用使文章图片相册式预览、左右滑动、自动切换、双击手捏放大缩小的方法（801）
- 打开页面自动滚动到指定位置的实现方法（769）
- 点击文字即可将文字复制到粘贴板的实现方法（767）
- 生日选择代码（520）
- 如何让一个div块在页面滚动到其出现之后在当前窗口的位置不再发生变化（519）
- 屏蔽终端的js代码（515）
- jQuery解决谷歌广告不显示但使打底广告无法点击问题（2021-08-12）
- 网站通用使文章图片相册式预览、左右滑动、自动切换、双击手捏放大缩小的方法（2019-06-10）
- 用swiper4给博客首页配置的一个3D方块切换轮播图（2018-10-29）
- 表单验证常用的正则表达式（2018-03-17）
- 如何让一个div块在页面滚动到其出现之后在当前窗口的位置不再发生变化（2018-03-15）
