零基础建站培训教程介绍

当前位置:

页面如何实现反复自动滚动显示动画

在之前的建站教程中,我们讲了如何制作网页滚动显示效果,方法见:网站animite动画载入效果制作步骤,通过 WOW.js 制作滚动动画。

今天给大家介绍另一种滚动动画效果,通过scrollR eveal.js来实现高品质网页特效,随鼠标滚轮监听位置不断加载动画效果炫酷网页制作特效插件JS代码。另外scrollReveal.js 的动画可以播放一次或无限次。请用支持HTML5+CSS3主流浏览器预览效果。(兼容测试:FireFox、Chrome、Safari、Opera等支持HTML5/CSS3浏览器)

使用方法:

下载scrollR eveal.js插件

下载scrollR eveal.js插件:链接: https://pan.baidu.com/s/1ivX_mx95YChp_LW_obImGA 提取码: jce5

使用方法

1、上传JS文件

将下载下来的动画插件上传到自己模板文件的JS文件里;

2、引入文件
将以下的代码放到自己底部模板的</body>标签上面;


   <script src="js/scrollReveal.js"></script>

    <script type="text/javascript">

      (function($) {
        'use strict';
        window.scrollReveal = new scrollReveal({ reset: true, move: '50px' });//控制动画距离
      })();

    </script>

3、引入清缓存文件
将以下代码放在</head>标签上面


<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

4、HTML写法
如果想让哪个元素添加动画,必须给该元素加上 data-scroll-reveal 属性,加上之后会执行默认的动画效果,你也可以自定义改属性以显示不同的动画效果,如:


<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>

相关参数介绍

enter

  • 说明: 动画起始方向
  • 值: top | right | bottom | left

move

  • 说明: 动画执行距离
  • 值: 数字,以 px 为单位

over

  • 说明: 动画持续时间
  • 值: 数字,以秒为单位

after/wait

  • 说明: 动画延迟时间
  • 值: 数字,以秒为单位

填充(可选)

可以在 data-scroll-reveal 属性里填充(添加)一些类似编程的“语句”,使其更有可读性,scrollReveal.js 支持以下“语句”:

  • from
  • the
  • and
  • then
  • but
  • with

也就是可以像这样写 HTML:


<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>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

学做网站论坛零基础学建网站课程