zoukankan      html  css  js  c++  java
  • scrollReveal.js – 页面滚动显示动画JS

    简介

    和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的 JavaScript,能让页面更加有趣,更吸引用户眼球。不同的是 WOW.js 的动画只播放一次,而 scrollReveal.js 的动画可以播放一次或无限次;WOW.js 依赖 animate.css,而 scrollReveal.js 不依赖其他任何文件。

    虽然 scrollReveal.js 不依赖 animate.css,但它的动画也是用 CSS3 创建的,所以它不支持 IE10 以下的浏览器。

    浏览器兼容

    IEChromeFirefoxOperaSafari
    IE10+ ✔ Chrome ✔ Firefox ✔ Opera ✔ Safari ✔

    IE6、IE7 等老旧浏览器不支持 CSS3 动画,所以没有效果,并且因为不支持一些属性或方法会报错。为了达到更好的兼容,最好加一个浏览器及版本判断。

    基本方法

    1、引入文件

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

    2、HTML

    <div data-scroll-reveal>dowebok.com</div>

    必须给元素加上 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>

    3、JavaScript

    window.scrollReveal = new scrollReveal();
    //或者,elem 为动画元素的任何级别的父元素
    window.scrollReveal2 = new scrollReveal({elem: document.getElementById('srcontainer')});

    data-scroll-reveal属性

    上面说了可以自定义 data-scroll-reveal 属性,下面来看看该属性的关键词和值(可选)。

    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>

    高级用法

    自定义默认值

    可以更改 scrollReveal.js 的默认配置,如:

    var config = {
        after: '0s',
        enter: 'bottom',
        move: '24px',
        over: '0.66s',
        easing: 'ease-in-out',
        viewportFactor: 0.33,
        reset: false,
        init: true
    };
    window.scrollReveal = new scrollReveal(config);

    动态HTML

    scrollReveal.init() 方法可以检测所有含有 data-scroll-reveal 属性的元素,并进行初始化,所以对于动态加载的元素,可以这样操作:

    var config = {
        enter: 'bottom',
        move: '40px',
        over: '0.16s',
        reset: true,
        init: false
    };
    window.scrollReveal = new scrollReveal(config);
    var data = {newElementHtml: '<div data-scroll-reveal>dowebok.com</div>'};
    var container = document.getElementById('#container');
    container.innerHTML(data.newElementHTML);
    scrollReveal.init();


    来自 http://www.dowebok.com/134.html

  • 相关阅读:
    防火墙透明模式
    HP管理工具System Management Homepage安装配置
    kbmmw 中JSON 中使用SQL 查询
    kbmmw 中JSON 操作入门
    第一个kbmmw for Linux 服务器
    kbmmw 5.02发布
    kbmmw 5.01 发布
    使用delphi 10.2 开发linux 上的Daemon
    使用unidac 在linux 上无驱动直接访问MS SQL SERVER
    使用delphi 10.2 开发linux 上的webservice
  • 原文地址:https://www.cnblogs.com/panmy/p/5191772.html
Copyright © 2011-2022 走看看