scrollreveal(页面滚动显示动画插件支持手机)
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了scrollreveal(页面滚动显示动画插件支持手机)相关的知识，希望对你有一定的参考价值。
scrollreveal.js是一款可以轻易实现桌面和移动浏览器元素随页面滚动产生动画的js插件。该插件通过配置可以在页面滚动，元素进入视口时产生炫酷的动画效果，同时还支持元素的3D效果，非常的实用。
安装
可以通过npm或bower来安装scrollreveal.js插件。
|
1
2
|
npm install scrollrevealbower install scrollreveal |
基本使用方法
html结构：
|
1
2
3
|
<!-- HTML --><div class="foo"> Foo </div><div class="bar"> Bar </div> |
|
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
|
// Animationorigin : ‘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 )‘,// Optionscontainer : 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(页面滚动显示动画插件支持手机)的主要内容，如果未能解决你的问题，请参考以下文章