您现在的位置是:首页 > 随笔小记 > 收藏

js插件之scrollReveal.js

简介scrollreveal.js是JavaScript用来显示动画的插件。它可以提供很简单的方法创建和维护多元素进入视角,并触发,消失。
scrollReveal.js
    一款页面滚动显示动画的 JavaScript,动画可以播放一次或无限次,不依赖其他任何文件。
使用方法:
        <script type="text/javascript" src="https://www.fubohan.com/js/scrollReveal.js"></script>

        <div data-scroll-reveal>dowebok.com</div>
        <div data-scroll-reveal="enter left and move 50px over 1.33s">dowebok.com</div>
        <div data-scroll-reveal="enter from the bottom after 1s">Hello world!</div>
        <div data-scroll-reveal="wait 2.5s and then ease-in-out 100px">iPhone 6</div>
            data-scroll-reveal属性
                enter
                说明: 动画起始方向
                值: top | right | bottom | left
                move
                说明: 动画执行距离
                值: 数字,以 px 为单位
                over
                说明: 动画持续时间
                值: 数字,以秒为单位
                after/wait
                说明: 动画延迟时间
                值: 数字,以秒为单位
            填充(可选)
                可以在 data-scroll-reveal 属性里填充(添加)一些类似编程的“语句”,使其更有可读性,scrollReveal.js 支持以下“语句”:

                from
                the
                and
                then
                but
                with
        <div data-scroll-reveal="wait 0.3s, then enter left and move 40px over 2s">dowebok.com</div>
        <div data-scroll-reveal="enter from the left after 0.3s, move 40px, over 2s">Hello world!</div>
        <div data-scroll-reveal="enter left move 40px over 2s after 0.3s">iPhone 6</div>
        <div data-scroll-reveal="enter left, move 40px, over 2s, wait 0.3s">I love you</div>
        
        window.scrollReveal = new scrollReveal();
        //或者,elem 为动画元素的任何级别的父元素
        window.scrollReveal2 = new scrollReveal({elem: document.getElementById('srcontainer')});

        自定义默认值
            可以更改 scrollReveal.js 的默认配置,如:
            var config = {
                after: '0s',
                enter: 'bottom',
                move: '24px',
                over: '0.66s',
                easing: 'ease-in-out',
                viewportFactor: 0.33,
                reset: false,
                init: true
            };
            window.scrollReveal = new scrollReveal(config);
        动态HTML
            scrollReveal.init() 方法可以检测所有含有 data-scroll-reveal 属性的元素,并进行初始化,所以对于动态加载的元素,可以这样操作:

            var config = {
                enter: 'bottom',
                move: '40px',
                over: '0.16s',
                reset: true,
                init: false
            };
            window.scrollReveal = new scrollReveal(config);
            var data = {newElementHtml: '<div data-scroll-reveal>dowebok.com</div>'};
            var container = document.getElementById('#container');
            container.innerHTML(data.newElementHTML);
            scrollReveal.init();
插件分享,提取密码  f5hk




著作权归作者所有。 
商业转载请联系作者获得授权,非商业转载请注明出处。
作者:付博瀚
来源:付博瀚个人博客
链接: https://www.fubohan.com/

文章评论

Top