推荐搜索: 魏义齐 网站防扒js微信号刷新 利用hbuilder打包APP的步骤清空

您当前的位置:首页 > 前端分享 > 正文

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

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

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

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

第一步: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。

项目实例:本博客首页的“博客简介”和“友情链接”使用了此效果。

如果本文帮助到了你,请点击本站你感兴趣的广告赞助一下,谢谢!

上一篇:slide Toggle()方法如何先后执行两次 下一篇:点击按钮在当前页面加载另一个页面的方法