scrollreveal(页面滚动显示动画插件支持手机)
scrollreveal.js是一款可以轻易实现桌面和移动浏览器元素随页面滚动产生动画的js插件。该插件通过配置可以在页面滚动,元素进入视口时产生炫酷的动画效果,同时还支持元素的3D效果,非常的实用。
ScrollReveal插件的github地址为:https://github.com/jlmakes/scrollreveal.js
安装
可以通过npm或bower来安装scrollreveal.js插件。
1
2
|
npm install scrollreveal bower install scrollreveal |
基本使用方法
HTML结构:
1
2
3
|
<!-- HTML --> < div class = "foo" > Foo </ div > < div class = "bar" > Bar </ div > |
JavaScript:
1
2
3
|
window.sr = ScrollReveal(); sr.reveal( '.foo' ); sr.reveal( '.bar' ); |
链式编程方法
ScrollReveal的构造函数和它主要的方法都支持链式编程。
1
2
3
4
5
6
|
window.sr = ScrollReveal(); sr.reveal( '.foo' ); sr.reveal( '.bar' ); // 上面的代码和下面的代码效果相同 window.sr = ScrollReveal().reveal( '.foo, .bar' ); |
配置参数
可以通过传入一个配置参数对象到ScrollReveal()
中来修改默认的参数设置。也可以通过向reveal()
中插入配置参数对象来自定义动画集合。
1
2
3
4
5
|
// 修改默认配置 window.sr = ScrollReveal({ reset: true }); // 自定义一个动画集合 sr.reveal( '.foo' , { wait: 200 } ); |
默认参数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
// Animation origin : 'bottom' , distance : '20px' , duration : 500, delay : 0, rotate : { x: 0, y: 0, z: 0 }, opacity : 0, scale : 0.9, easing : 'cubic-bezier( 0.6, 0.2, 0.1, 1 )' , // Options container : null , mobile : true , reset : false , useDelay : 'always' , viewFactor : 0.20, viewOffset : { top: 0, right: 0, bottom: 0, left: 0 }, afterReveal : function ( domEl ) {}, afterReset : function ( domEl ) {} |
参数描述
参数 | 类型 | 可用值 | 描述 |
origin | string | 'top','right','bottom','left' | 动画的方向 |
distance | string | 可用任何CSS单位值,如:'20px','10vw','5%' | 动画的距离 |
duration | number | 500 | 动画持续时间,单位毫秒 |
delay | number | 0 | 动画的延迟时间,单位毫秒 |
rotate | object/number | { x: 0, y: 0, z: 0 } | 开始的角度,单位degrees |
opacity | number | 0 | 开始的透明度 |
scale | number | 0.9 | 开始的缩放值 |
easing | string | 'ease' 'ease' 'ease-out' 'ease-in-out' 'ease-in-out' |
动画的easing效果,可以是任何有效的CSS easing值 |
container | node | document.getElementById('foo') | 容器 |
mobile | boolean | true / false | 是否在移动手机上显示动画效果 |
reset | boolean | true / false | 元素是否在容器边界内来回滚动时都产生动画效果 |
useDelay | string | 'always','once','onload' | 控制元素什么时候使用动画延迟 |
viewFactor | number | 0.20 | 0.20表示元素在产生动画之前,它的20%在viewport或容器的边界之内 |
viewOffset | object/number | { top: 48, bottom: 24 } | 增加viewport或容器边界,单位像素 |
afterReveal | function | function( domEl ) {} | reveal动画之后触发的回调函数 |
afterReset | function | function( domEl ) {} | reset动画之后触发的回调函数 |
高级应用
覆盖配置
reveal()
方法中的调用元素可以随时进行修改。例如:
1
2
|
< div class = "foo" > Foo </ div > < div class = "foo" id = "chocolate" > Chip </ div > |
1
2
3
4
5
6
7
8
9
10
11
|
var fooReveal = { delay : 200, distance : '90px' , easing : 'ease-in-out' , rotate : { z: 10 }, scale : 1.1 }; window.sr = ScrollReveal() .reveal( '.foo' , fooReveal ) .reveal( '#chocolate' , { delay: 500, scale: 0.9 } ); |
配置多个容器
默认的容器是viewport,你可以对它进行修改。
1
2
3
4
5
6
7
8
9
10
11
|
< div id = "fooContainer" > < div class = "foo" > Foo 1 </ div > < div class = "foo" > Foo 2 </ div > < div class = "foo" > Foo 3 </ div > </ div > < div id = "barContainer" > < div class = "bar" > Bar 1 </ div > < div class = "bar" > Bar 2 </ div > < div class = "bar" > Bar 3 </ div > </ div > |
1
2
3
4
5
6
|
var fooContainer = document.getElementById( 'fooContainer' ); var barContainer = document.getElementById( 'barContainer' ); window.sr = ScrollReveal() .reveal( '.foo' , { container: fooContainer } ); .reveal( '.bar' , { container: barContainer } ); |
异步调用内容
可以通过sync()
方法来异步加载已经存在的reveal sets中的内容。
1
2
3
4
5
6
7
8
9
10
11
|
<!-- index.html --> < div id = "container" > < div class = "foo" >foo</ div > < div class = "foo" >foo</ div > < div class = "foo" >foo</ div > </ div > <!-- ajax.html --> < div class = "foo" >foo async</ div > < div class = "foo" >foo async</ div > < div class = "foo" >foo async</ div > |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
var fooContainer, content, sr, xmlhttp; fooContainer = document.getElementById( 'fooContainer' ); sr = ScrollReveal(); sr.reveal( '.foo' , { container: fooContainer } ); // Setup a new asynchronous request... xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function () { if ( xmlhttp.readyState == XMLHttpRequest.DONE ) { if ( xmlhttp.status == 200 ) { // Turn our response into HTML... var content = document.createElement( 'div' ); content.innerHTML = xmlhttp.responseText; content = content.childNodes; // Add each element to the DOM... for ( var i = 0; i < content.length; i++ ) { fooContainer.appendChild( content[ i ]); }; // Finally! sr.sync(); } } } xmlhttp.open( 'GET' , 'ajax.html' , true ); xmlhttp.send(); |
小技巧
加载次序
你需要注意的重要的一点是尽可能在页面的最后再调用ScrollReveal,也就是说:
- 页面中的DOM元素已经被加载完成。
- 任何第三方的js库已经被加载。
- 页面中的元素样式已经被加载不会在被覆盖。
示例代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
|
<!DOCTYPE html> < html > < body > <!-- All the things... --> < script src = "js/scrollreveal.min.js" ></ script > < script > window.sr = ScrollReveal(); </ script > </ body > </ html > |
提升用户体验
在大多数情况下,你的元素都是从opacity: 0
开始,以使它们可以制作淡入的效果。但是由于JavaScript在页面开始渲染时才被加载,用户可能会看到元素闪烁的情况发生。
解决这个问题的方法是在<head>
中设置reveal元素的可见性为隐藏状态。例如下面的代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPE html> < html > < head > < script > // If JavaScript is enabled, add '.js-enabled' to < html > element document.documentElement.classList.add('js-enabled'); </ script > < style > /* Ensure elements load hidden before ScrollReveal runs */ .js-enabled .fooReveal { visibility: hidden; } </ style > </ head > < body > <!-- All the things... --> < script src = "js/scrollreveal.min.js" ></ script > < script > window.sr = ScrollReveal(); sr.reveal('.fooReveal'); </ script > </ body > </ html > |
添加3D透视效果
ScrollReveal支持3D旋转效果,你需要做的是为你的容器指定一个perspective
属性。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE html> < html > < head > < script > document.documentElement.classList.add('js-enabled'); </ script > < style > .js-enabled .fooReveal { visibility: hidden; } .fooContainer { perspective: 800px; } </ style > </ head > < body > < div class = "fooContainer" > < div class = "fooReveal" > Foo </ div > < div class = "fooReveal" > Foo </ div > < div class = "fooReveal" > Foo </ div > </ div > < script src = "js/scrollreveal.min.js" ></ script > < script > window.sr = ScrollReveal(); sr.reveal( '.fooReveal', { rotate: {x: 65} } ); </ script > </ body > </ html > |
ScrollReveal插件的github地址为:https://github.com/jlmakes/scrollreveal.js
scrollreveal(页面滚动显示动画插件支持手机)的更多相关文章
- scrollReveal.js – 页面滚动显示动画JS
简介 和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的 JavaScript ,能让页面更加有趣,更吸引用户眼球.不同的是 WOW.js 的动画只播放一次,而 ...
- 一款很好用的页面滚动元素动画插件-AOS.JS
aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果.在页面往回滚动时,元素会恢复到原来的状态. 加载方法 ...
- ScrollReveal-元素随页面滚动产生动画的js插件
简介 和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的 JavaScript,能让页面更加有趣,更吸引用户眼球.不同的是 WOW.js 的动画只播放一次,而 scro ...
- kissui.scrollanim页面滚动动画库插件
简介 kissui.scrollanim是一款实用的纯JS和CSS3页面滚动动画库插件.通过该插件可以使元素进入浏览器视口的时候,展示指定的CSS3动画效果. 下载地址及演示 在线演示 在线下载 安装 ...
- aos.js超赞页面滚动元素动画jQuery动画库
插件描述:aos.js 是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果.在页面往回滚动时,元素会恢复到原来的状态 ...
- #Plugin 数字滚动累加动画插件
数字滚动累加动画插件 NumScroll 1.使用前先引入jquery2.前端学习群:814798690 下载地址 https://github.com/chaorenzeng/jquery.num ...
- 页面滚动显示或隐藏元素Headroom.js插件帮助你实现滚动效果
Headroom.js 是什么? Headroom.js 是一个轻量级.高性能的JS小工具(不依赖任何工具库!),它能在页面滚动时做出响应.此页面顶部的导航条就是一个鲜活的案例,当页面向下滚动时,导航 ...
- jquery页面滚动显示浮动菜单栏锚点定位效果
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- [转] 使用CSS3 will-change提高页面滚动、动画等渲染性能 ---张鑫旭
一.先来看一个例子 下面这个例子来自某外文,我这里简单转述下. 视差滚动现在不是挺流行的嘛,然后Chris Ruppel当其使用background-attachment: fixed实现背景图片不随 ...
随机推荐
- 【BZOJ】2956:模积和
Time Limit: 10 Sec Memory Limit: 128 MB Description 求∑∑((n mod i)*(m mod j))其中1<=i<=n,1<=j ...
- Wifi密码破解实战
原文链接地址:http://www.freebuf.com/articles/wireless/127261.html https://www.baidu.com/?tn=98012088_4_dg& ...
- MySQL数据库无法远程连接的解决办法
远程登陆数据库的时候出现了下面出错信息: ERROR 2003 (HY000): Can't connect to MySQL server on 'xxx.xxx.xxx.xxx', 经过今天下午的 ...
- Java试题二
QUESTION 37Given:1. class Super {2. private int a;3. protected Super(int a) { this.a = a; }4. } ...1 ...
- [Z3001] connection to database 'zabbix' failed: [1045] Access denied for user 'zabbix'@'localhost' (using password: YES)
在配置了zabbix服务端后,发现:“zabbix server is running”的Value值是“no”, 用:netstat -atnlp|grep 10051 发现没有出现zabbix_s ...
- [Java多线程]-ThreadLocal源码及原理的深入分析
ThreadLocal<T>类:以空间换时间提供一种多线程更快捷访问变量的方式.这种方式不存在竞争,所以也不存在并发的安全性问题. //-------------------------- ...
- bootstrap datetimepicker的参数解释
使用bootstrap datetimepicker(日期时间选择器)的过程中,发现中文参数说明和英文参数说明严重不符,所以结合自己使用的情况和英文参数说明,做了如下翻译. $(".form ...
- ubuntu学习命令
1.双系统下挂载windows硬盘 检测ntfs-3g是否安装:locate ntfs-3g 没有则安装: sudo apt-get install ntfs-3g 查看硬盘信息: sudo fdis ...
- html中<meta>标签
这个是html文档一般都有的元素. 1. 介绍 元素基本所有浏览器都支持,它提供页面的元信息,比如描述.关键字.web服务等 位于文档头部的内部,将以名称/值对出现 2. 属性 注意:如果没有name ...
- spring boot 2.0.3+spring cloud (Finchley)9、 安全组件Spring Boot Security
官方文档 一.Spring Security介绍 Spring Security是Spring Resource社区的一个安全组件,Spring Security为JavaEE企业级开发提供了全面的安 ...