2017-09-16JS插件scrollReveal动画效果

您现在的位置是: 首页 > 学无止境 > 笔记

    现在的许多网站都非常注重网站的展示效果,也是用户对此网站的第一体验认可程度,这将会关系到用户对这个网站的留意与否。在网站中用原生的JS开发一些特效是比较繁琐的,ScrollReveal.js插件在网站动画开发中效率会提高很多。

    ScrollReveal.js是用原生JS开发好的一个插件,它也是开源的,所以只需要在页面中引入这个文件就可以使用了。初学者我不建议去读懂这个插件的源代码,只需要学会怎么去使用和快速的实现一些特效为关键。

    使用这个插件是非常简单的首先在页面中引入文件:

     <script src="js/scrollReveal.js"></script>

    文件引入后给需要动画效果的HTML标签添加属性:data-scroll-reveal;只加入属性没有给值得话它会执行默认的动画效果,如果需要改变效果就需要给data-scroll-reveal属性值,类似:

    <div data-scroll-reveal="enter left and move 50px over 1.33s">麻浪个人博客</div>

    <div data-scroll-reveal="enter from the bottom after 1s">ScrollReveal</div>


    enter left and move 50px over 1.33s值说明:

    属性的值里面enter代表的是动画特效的起始方向,后面跟left就是起始向左开始动画,right就是起始向右开始动画,top就是向上开始动画,bottom就是向下开始动画(别忘记空格分隔开!)。之后再继续空格加入and move 50px就是向起始动画方向移动50px像素(移动距离是可以自定义的以px为单位),在继续空格over 1.33s就是代表动画的持续时间(以秒为单位),这样页面进入后这个标签元素就会向左移动50px的像素持续1.33秒的动画效果。

    enter from the bottom after 1s值说明:

    有没有发现enter后面并没有写起始方向的值?其实这种写法:enter from the bottom,和这种写法:enter left是相同的起始方向,加入from the只是为了代码的可读性更高一点,比如enter left and move 50px over 1.33s中的and英文也是可以不写的!起始方向定义好后紧接着输入after 1s就是起始方向向下移动延迟1秒。

    这就是ScrollReveal.js插件的基本使用语法,需要注意的是在引入ScrollReveal.js插件的页面添加以下代码(达到网页在IE浏览器6789版本中的兼容性):

<script type="text/javascript">
    if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
        (function(){
            window.scrollReveal = new scrollReveal({reset: true});
        })();
    };
</script>

   

    有喜欢此插件的朋友可点击下载:scrollReveal.js下载

关键字词:scrollReveal | 动画效果 | JS插件