scrollreveal(页面滚动显示动画插件支持手机)

scrollreveal.js是一款可以轻易实现桌面和移动浏览器元素随页面滚动产生动画的js插件。该插件通过配置可以在页面滚动，元素进入视口时产生炫酷的动画效果，同时还支持元素的3D效果，非常的实用。

安装

可以通过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

时间： 2024-10-05 03:01:31

scrollreveal(页面滚动显示动画插件支持手机)的相关文章

ScrollReveal-元素随页面滚动产生动画的js插件

简介 和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的 JavaScript,能让页面更加有趣,更吸引用户眼球.不同的是 WOW.js 的动画只播放一次,而 scrollReveal.js 的动画可以播放一次或无限次:WOW.js 依赖 animate.css,而 scrollReveal.js 不依赖其他任何文件. 虽然 scrollReveal.js 不依赖 animate.css,但它的动画也是用 CSS3 创建的,所以它不支持 IE10 以下的浏览器.

页面滚动显示或隐藏元素Headroom.js插件帮助你实现滚动效果

Headroom.js 是什么? Headroom.js 是一个轻量级.高性能的JS小工具(不依赖任何工具库!),它能在页面滚动时做出响应.此页面顶部的导航条就是一个鲜活的案例,当页面向下滚动时,导航条消失,当页面向上滚动时,导航条就出现了. Headroom.js 有什么用? 固定页头(导航条)可以方便用户在各个页面之间切换.但是这也会带来些问题…本文原创博客地址:http://www.cnblogs.com/unofficial官网地址:www.pushself.com) 大屏幕一般都是宽度

kissui.scrollanim页面滚动动画库插件

简介 kissui.scrollanim是一款实用的纯JS和CSS3页面滚动动画库插件.通过该插件可以使元素进入浏览器视口的时候,展示指定的CSS3动画效果. 下载地址及演示 在线演示 在线下载 安装 可以通过bower来安装kissui.scrollanim插件. bower install kissui.scrollanim 使用方法 在页面中引入scrollanim.css和scrollanim.js文件. <link rel="stylesheet" href="

aos.js超赞页面滚动元素动画jQuery动画库

插件描述:aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果.在页面往回滚动时,元素会恢复到原来的状态. 简要教程 aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果.在页面往回滚动时,元素会恢复到原来的状态. AOS.js 下载          案例演示 安装 可以通过bower来安装aos动画库插件.

#JS 数字滚动累加动画插件

数字滚动累加动画插件  NumScroll 1.使用前先引入jquery2.前端学习群:739574382 下载地址 https://github.com/chaorenzeng/jquery.numscroll.js.git 快速使用 1.引入jquery和jquery.numscroll.js <script src='http://code.jquery.com/jquery-2.1.1.min.js' type='text/javascript'></script> <

SwwetAlert消息提示插件,支持手机移动响应式替换alert漂亮的消息提示插件

SwwetAlert 支持手机移动响应式消息提示插件 官方地址:http://tristanedwards.me/sweetalert IE11有闪退 IE11无闪退 地址:http://www.js-css.cn/jscode/tips/tips13/ 语法参考 swal("Good job!", "You clicked the button!", "success") 效果图 IE11无闪退JS (sweet-alert.min.js) !

jquery页面滚动显示浮动菜单栏锚点定位效果

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <title>jQuery

分享一个实用插件（页面滚动触发动画）以及其内部的所有动画属性值

个人不太擅长实用JQuery插件,比较喜欢使用原生JS代码,但是制作网站时的难度很大. 今天推荐一个比较实用的插件 地址为: http://www.htmleaf.com/jQuery/Layout-Interface/201704274479.html         <link rel="stylesheet" href="css/animate.min.css">        <script type="text/javascri

scrollReveal.js页面滚动动态效果

scrollReveal.jshttp://www.dowebok.com/134.html简介 和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的 JavaScript,能让页面更加有趣,更吸引用户眼球.不同的是 WOW.js 的动画只播放一次,而 scrollReveal.js 的动画可以播放一次或无限次:WOW.js 依赖 animate.css,而 scrollReveal.js 不依赖其他任何文件. 虽然 scrollReveal.js 不依赖 anim