JUNER

一些笔记,一点生活

最怕一生碌碌无为,还说平凡难能可贵。最好的输入,是输出;最佳的成长,是分享。

ScrollReveal.js网页滚动动态加载插件

笔记 · 2019-11-19修改 · 2019-11-19 16:03:27 · 0

scrollreveal.js是一个兼容PC端和移动设备的滚动动画库。不同的是 WOW.js 的动画只播放一次,而 scrollReveal.js 的动画可以播放一次或无限次;

特点:

1、scrollReveal同时兼容PC端和移动端。

2、0依赖(不依赖于jQuery,也不依赖于animate.css)。

3、定制性高,使用简单方便快捷。同样兼容也是支持ie10+的浏览器使用方式依旧很简单。


1、下载官网:https://scrollrevealjs.org/

2、引入动画库javascript文件

<script src="https://unpkg.com/scrollreveal@4.0.0/dist/scrollreveal.min.js"></script>

3、html中为需要动画效果的标签绑定一个类 .box

<div class="box"></div>

4、设置动画配置信息(更多详细可以查看 https://scrollrevealjs.org/api/reveal.html

ScrollReveal().reveal('.box', {
        reset: true,   // 滚动鼠标时,动画开关(默认是false没有打开鼠标滚动的动画开关)
        origin: 'right', // 动画开始的方向
        duration: 500,   // 动画持续时间
        delay: 0, // 延迟
        rotate: {x:0, y:0, z:0},  // 过度到0的初始角度
        opacity: 0.2, // 初始透明度  (0.2到1的效果)
        scale:2,       //缩放
        easing: 'ease-in-out', //动画效果// 缓动'ease', 'ease-in-out','linear'...
        // 回调函数
        //当动画开始之前会被触发
        beforeReveal: function(domEl){
            console.log('动画执行了');
        },
        //鼠标滚轮滚动之前会被触发
        beforeReset: function(domEl){
            console.log('滚轮开始---');
        },
        //动画开始之后会被触发
        afterReveal: function(domEl){
            console.log('动画结束了');
        },
        //滚轮滚动之后会被触发
        afterReset: function(domEl){
            console.log('滚轮结束了');
        }
    });


相关内容

JavaScript变量 - 给数据起个名字

在程序里面数据可以由变量来表示,变量其实就是数据的一个名字,命名了这个数据以后,在程序里面就可以使用变量来代替具体的数据。在JavaScript里面,想要使用一个变量,需要声明一下,声明变量使用 va...

笔记 · 2020-02-27修改 · 2020-02-27 09:45:36 · 24422

Javascript输入输出语句

Javascript(js)是一门编程语言,可以帮助我们在网页中实现和用户的一种交互效果,比如说我们可以弹出一个输入框让用户输入内容,然后让程序内部去处理,处理完之后,再把结果返回给用户,这就是我们一...

笔记 · 2019-12-24修改 · 2019-12-24 22:16:20 · 214352

Swiper插件设置禁止鼠标拖动

Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件。用swiper插件做PC端分屏项目一定能用到的目前遇到的问题是,客户想复制轮播上的文案,却不能复制,一拖拉轮...

笔记 · 2019-11-26修改 · 2019-11-26 11:13:57 · 52107

Mac系统更新Node最新版本

第一步,先查看本机node.js版本:node-v第二步,清除node.js的cache:sudonpmcacheclean-f第三步,安装 n 工具,这个工具是专门用来管理node.js版本的,别怀...

笔记 · 2019-11-19修改 · 2019-11-19 16:04:35 · 22147