解密小米魅族等网站在可视区域加载动画

最新推荐文章于 2024-07-04 15:00:25 发布

置顶最骚的就是你

最新推荐文章于 2024-07-04 15:00:25 发布

阅读量3.4k

点赞数

分类专栏： web前端学习文章标签： javascript 小米解密动画可视区域

本文链接：https://blog.csdn.net/libin_1/article/details/52199758

版权

web前端学习专栏收录该内容

301 篇文章 2 订阅

订阅专栏

用这个：http://www.cnblogs.com/aliyue/p/6742717.html

废话不多说，直接上DEMO下载地址：http://download.csdn.net/detail/cometwo/9602499

参考链接：http://www.dowebok.com/134.html

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

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

基本方法

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();

DEMO

<!doctype html>
<html lang="zh-CN">

    <head>
        <title>scrollReveal.js演示1_dowebok</title>
        <meta charset="utf-8">
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            .dowebok {
                font-family: "Microsoft Yahei";
                background-color: #202a39;
            }

            .dowebok h1 {
                margin: 80px 0 50px;
                font-size: 60px;
                font-weight: 500;
                color: red;
                text-align: center;
            }

            .dowebok h2 {
                margin: 10px 0;
                font-size: 24px;
                font-weight: 500;
                color: yellow;
                text-align: center;
            }

            .dowebok .column-container {
                width: 560px;
                margin: 0 auto;
                padding-top: 150px;
                font-size: 0;
                border: 1px solid red; 
            }

            .dowebok .column {
                display: inline-block;
                width: 30px;
                margin: 0 20px;
                *display: inline;
                zoom: 1;

            }

            .dowebok .block {
                margin-bottom: 45px;
                border-radius: 3px;
            }

            .dowebok .block-1x {
                height: 180px;
            }

            .dowebok .block-2x {
                height: 240px;
            }

            .dowebok .block-3x {
                height: 300px;
            }

            .block-blueberry {
                background: #008597;
            }

            .block-slate {
                background: #2d3443;
            }

            .block-grape {
                background: #4d407c;
            }

            .block-raspberry {
                background: #ff005d;
            }

            .block-mango {
                background: #ffcc00;
            }

            .block-orange {
                background: #ff7c35;
            }

            .block-kiwi {
                background: #35ff99;
            }
        </style>
    </head>

    <body class="dowebok">
        <h1 data-scroll-reveal="enter from the top over 1.5s">scrollReveal.js</h1>
        <h2 data-scroll-reveal="enter bottom but wait 1s">——页面滚动显示动画 JavaScript，不支持 IE6 - IE9</h2>
        <h2 data-scroll-reveal="wait 2.5s and then ease-in-out 100px">iPhone 6</h2>
        <div class="column-container clearfix">
            <!-- col 1 -->
            <div class="column">
                <div class="block block-1x block-slate" data-scroll-reveal="enter top over 3s after 0.5s"></div>
                <div class="block block-2x block-mango" data-scroll-reveal="enter right after 0.5s"></div>
                <div class="block block-1x block-kiwi" data-scroll-reveal="enter bottom over 1s and move 300px after 0.3s"></div>
                <div class="block block-3x block-blueberry" data-scroll-reveal="enter top over 0.5s and move 200px"></div>
                <div class="block block-2x block-raspberry" data-scroll-reveal="enter bottom over 1s and move 100px"></div>
                <div class="block block-1x block-grape" data-scroll-reveal="enter top"></div>
            </div>

            <!-- col 2 -->
            <div class="column">
                <div class="block block-3x block-kiwi" data-scroll-reveal="enter bottom over 1s and move 300px after 0.3s"></div>
                <div class="block block-1x block-orange" data-scroll-reveal="enter right"></div>
                <div class="block block-2x block-grape" data-scroll-reveal="enter top"></div>
                <div class="block block-1x block-orange" data-scroll-reveal="enter left"></div>
                <div class="block block-1x block-grape" data-scroll-reveal="enter top"></div>
                <div class="block block-2x block-slate" data-scroll-reveal="enter top over 3s after 0.5s"></div>
            </div>

            <!-- col 3 -->
            <div class="column">
                <div class="block block-2x block-raspberry" data-scroll-reveal="enter bottom over 1s and move 100px"></div>
                <div class="block block-1x block-blueberry" data-scroll-reveal="enter top over 0.5s and move 200px"></div>
                <div class="block block-2x block-slate" data-scroll-reveal="enter top over 3s after 0.5s"></div>
                <div class="block block-1x block-mango" data-scroll-reveal="enter right after 0.5s"></div>
                <div class="block block-1x block-slate" data-scroll-reveal="enter top over 3s after 0.5s"></div>
                <div class="block block-3x block-orange" data-scroll-reveal="enter left"></div>
            </div>

            <!-- col 4 -->
            <div class="column">
                <div class="block block-1x block-orange" data-scroll-reveal="enter left"></div>
                <div class="block block-2x block-grape" data-scroll-reveal="enter top"></div>
                <div class="block block-3x block-raspberry" data-scroll-reveal="enter bottom over 1s and move 100px"></div>
                <div class="block block-1x block-blueberry" data-scroll-reveal="enter top over 0.5s and move 200px"></div>
                <div class="block block-2x block-kiwi" data-scroll-reveal="enter bottom over 1s and move 300px after 0.3s"></div>
                <div class="block block-1x block-mango" data-scroll-reveal="enter right after 0.5s"></div>
            </div>

            <!-- col 5 -->
            <div class="column">
                <div class="block block-3x block-mango" data-scroll-reveal="enter right after 0.5s"></div>
                <div class="block block-1x block-kiwi" data-scroll-reveal="enter bottom over 1s and move 300px after 0.3s"></div>
                <div class="block block-2x block-orange" data-scroll-reveal="enter left"></div>
                <div class="block block-1x block-grape" data-scroll-reveal="enter top"></div>
                <div class="block block-1x block-slate" data-scroll-reveal="enter top over 3s after 0.5s"></div>
                <div class="block block-2x block-raspberry" data-scroll-reveal="enter bottom over 1s and move 100px"></div>
            </div>

            <!-- col 6 -->
            <div class="column">
                <div class="block block-1x block-kiwi" data-scroll-reveal="enter bottom over 1s and move 300px after 0.3s"></div>
                <div class="block block-3x block-slate" data-scroll-reveal="enter top over 3s after 0.5s"></div>
                <div class="block block-1x block-blueberry" data-scroll-reveal="enter top over 0.5s and move 200px"></div>
                <div class="block block-3x block-kiwi" data-scroll-reveal="enter bottom over 1s and move 300px after 0.3s"></div>
                <div class="block block-1x block-orange" data-scroll-reveal="enter left"></div>
                <div class="block block-1x block-blueberry" data-scroll-reveal="enter top over 0.5s and move 200px"></div>
            </div>

            <!-- col 7 -->
            <div class="column">
                <div class="block block-2x block-blueberry" data-scroll-reveal="enter top over 0.5s and move 200px"></div>
                <div class="block block-1x block-raspberry" data-scroll-reveal="enter bottom over 1s and move 100px"></div>
                <div class="block block-1x block-mango" data-scroll-reveal="enter right after 0.5s"></div>
                <div class="block block-3x block-raspberry" data-scroll-reveal="enter bottom over 1s and move 100px"></div>
                <div class="block block-2x block-mango" data-scroll-reveal="enter right after 0.5s"></div>
                <div class="block block-1x block-slate" data-scroll-reveal="enter top over 3s after 0.5s"></div>
            </div>

            <!-- col 8 -->
            <div class="column">
                <div class="block block-1x block-grape" data-scroll-reveal="enter top"></div>
                <div class="block block-2x block-orange" data-scroll-reveal="enter left"></div>
                <div class="block block-1x block-grape" data-scroll-reveal="enter top"></div>
                <div class="block block-3x block-slate" data-scroll-reveal="enter top over 3s after 0.5s"></div>
                <div class="block block-1x block-blueberry" data-scroll-reveal="enter top over 0.5s and move 200px"></div>
                <div class="block block-2x block-kiwi" data-scroll-reveal="enter bottom over 1s and move 300px after 0.3s"></div>
            </div>
        </div>

        <script src="js/scrollReveal.js"></script>
        <script>
            (function() {
                window.scrollReveal = new scrollReveal({
                    reset: true,   //执行几次  true
                    move: '50px'
                });
            })();
        </script>

        <style>
            .dowebok .vad {
                margin: 50px 0 5px;
                padding-bottom: 150px;
                font-family: Consolas, arial, 宋体;
                text-align: center;
            }

            .dowebok .vad a {
                display: inline-block;
                height: 36px;
                line-height: 36px;
                margin: 0 5px;
                padding: 0 50px;
                font-size: 14px;
                text-align: center;
                color: #eee;
                text-decoration: none;
                background-color: #222;
            }

            .dowebok .vad a:hover {
                color: #fff;
                background-color: #000;
            }

            .dowebok .thead {
                width: 728px;
                height: 90px;
                margin: 0 auto;
                border-bottom: 40px solid transparent;
            }
        </style>
        <p class="vad">
            <a href="http://www.dowebok.com/" target="_blank">dowebok.com</a>
            <a href="http://www.dowebok.com/134.html" target="_blank">说 明</a>
            <a href="http://www.dowebok.com/134.html" target="_blank">下 载</a>
        </p>

    </body>

</html>

/*
                       _ _ _____                      _   _
                      | | |  __ \                    | | (_)
    ___  ___ _ __ ___ | | | |__) |_____   _____  __ _| |  _ ___
   / __|/ __| '__/ _ \| | |  _  // _ \ \ / / _ \/ _` | | | / __|
   \__ \ (__| | | (_) | | | | \ \  __/\ V /  __/ (_| | |_| \__ \
   |___/\___|_|  \___/|_|_|_|  \_\___| \_/ \___|\__,_|_(_) |___/ v.0.1.3
                                                        _/ |
                                                       |__/

    "Declarative on-scroll reveal animations."

/*=============================================================================

    scrollReveal.js was inspired by cbpScroller.js (c) 2014 Codrops.

    Licensed under the MIT license.
    http://www.opensource.org/licenses/mit-license.php

=============================================================================*/

/*! scrollReveal.js v0.1.3 (c) 2014 Julian Lloyd | MIT license */

/*===========================================================================*/


window.scrollReveal = (function (window) {

  'use strict';

  // generator (increments) for the next scroll-reveal-id
  var nextId = 1;

  /**
   * RequestAnimationFrame polyfill
   * @function
   * @private
   */
  var requestAnimFrame = (function () {
    return window.requestAnimationFrame ||
      window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      function (callback) {
        window.setTimeout(callback, 1000 / 60);
    };
  }());

  function scrollReveal(options) {

      this.options = this.extend(this.defaults, options);
      this.docElem = this.options.elem;
      this.styleBank = {};

      if (this.options.init == true) this.init();
  }

  scrollReveal.prototype = {

    defaults: {
      after:   '0s',
      enter:   'bottom',
      move:    '24px',
      over:    '0.66s',
      easing:  'ease-in-out',
      opacity: 0,
      complete: function() {},

  //  if 0, the element is considered in the viewport as soon as it enters
  //  if 1, the element is considered in the viewport when it's fully visible
      viewportFactor: 0.33,

  // if false, animations occur only once
  // if true, animations occur each time an element enters the viewport
      reset: false,

  // if true, scrollReveal.init() is automaticaly called upon instantiation
      init: true,
      elem: window.document.documentElement
    },

    /*=============================================================================*/

    init: function () {

      this.scrolled = false;

      var self = this;

  //  Check DOM for the data-scrollReveal attribute
  //  and initialize all found elements.
      this.elems = Array.prototype.slice.call(this.docElem.querySelectorAll('[data-scroll-reveal]'));
      this.elems.forEach(function (el, i) {

    //  Capture original style attribute
        var id = el.getAttribute("data-scroll-reveal-id");
        if (!id) {
            id = nextId++;
            el.setAttribute("data-scroll-reveal-id", id);
        }
        if (!self.styleBank[id]) {
          self.styleBank[id] = el.getAttribute('style');
        }

        self.update(el);
      });

      var scrollHandler = function (e) {
        // No changing, exit
        if (!self.scrolled) {
          self.scrolled = true;
          requestAnimFrame(function () {
            self._scrollPage();
          });
        }
      };

      var resizeHandler = function () {

    //  If we’re still waiting for settimeout, reset the timer.
        if (self.resizeTimeout) {
          clearTimeout(self.resizeTimeout);
        }
        function delayed() {
          self._scrollPage();
          self.resizeTimeout = null;
        }
        self.resizeTimeout = setTimeout(delayed, 200);
      };

      // captureScroll
      if (this.docElem == window.document.documentElement) {
            window.addEventListener('scroll', scrollHandler, false);
            window.addEventListener('resize', resizeHandler, false);
        }
        else {
            this.docElem.addEventListener('scroll', scrollHandler, false);
        }
    },

    /*=============================================================================*/

    _scrollPage: function () {
        var self = this;

        this.elems.forEach(function (el, i) {
          self.update(el);
        });
        this.scrolled = false;
    },

    /*=============================================================================*/

    parseLanguage: function (el) {

  //  Splits on a sequence of one or more commas or spaces.
      var words = el.getAttribute('data-scroll-reveal').split(/[, ]+/),
          parsed = {};

      function filter (words) {
        var ret = [],

            blacklist = [
              "from",
              "the",
              "and",
              "then",
              "but",
              "with"
            ];

        words.forEach(function (word, i) {
          if (blacklist.indexOf(word) > -1) {
            return;
          }
          ret.push(word);
        });

        return ret;
      }

      words = filter(words);

      words.forEach(function (word, i) {

        switch (word) {
          case "enter":
            parsed.enter = words[i + 1];
            return;

          case "after":
            parsed.after = words[i + 1];
            return;

          case "wait":
            parsed.after = words[i + 1];
            return;

          case "move":
            parsed.move = words[i + 1];
            return;

          case "ease":
            parsed.move = words[i + 1];
            parsed.ease = "ease";
            return;

          case "ease-in":
            parsed.move = words[i + 1];
            parsed.easing = "ease-in";
            return;

          case "ease-in-out":
            parsed.move = words[i + 1];
            parsed.easing = "ease-in-out";
            return;

          case "ease-out":
            parsed.move = words[i + 1];
            parsed.easing = "ease-out";
            return;

          case "over":
            parsed.over = words[i + 1];
            return;

          default:
            return;
        }
      });

      return parsed;
    },


    /*=============================================================================*/

    update: function (el) {

      var that = this;
      var css   = this.genCSS(el);
      var style = this.styleBank[el.getAttribute("data-scroll-reveal-id")];

      if (style != null) style += ";"; else style = "";

      if (!el.getAttribute('data-scroll-reveal-initialized')) {
        el.setAttribute('style', style + css.initial);
        el.setAttribute('data-scroll-reveal-initialized', true);
      }

      if (!this.isElementInViewport(el, this.options.viewportFactor)) {
        if (this.options.reset) {
          el.setAttribute('style', style + css.initial + css.reset);
        }
        return;
      }

      if (el.getAttribute('data-scroll-reveal-complete')) return;

      if (this.isElementInViewport(el, this.options.viewportFactor)) {
        el.setAttribute('style', style + css.target + css.transition);
    //  Without reset enabled, we can safely remove the style tag
    //  to prevent CSS specificy wars with authored CSS.
        if (!this.options.reset) {
          setTimeout(function () {
            if (style != "") {
              el.setAttribute('style', style);
            } else {
              el.removeAttribute('style');
            }
            el.setAttribute('data-scroll-reveal-complete',true);
            that.options.complete(el);
          }, css.totalDuration);
        }
      return;
      }
    },

    /*=============================================================================*/

    genCSS: function (el) {
      var parsed = this.parseLanguage(el),
          enter,
          axis;

      if (parsed.enter) {

        if (parsed.enter == "top" || parsed.enter == "bottom") {
          enter = parsed.enter;
          axis = "y";
        }

        if (parsed.enter == "left" || parsed.enter == "right") {
          enter = parsed.enter;
          axis = "x";
        }

      } else {

        if (this.options.enter == "top" || this.options.enter == "bottom") {
          enter = this.options.enter
          axis = "y";
        }

        if (this.options.enter == "left" || this.options.enter == "right") {
          enter = this.options.enter
          axis = "x";
        }
      }

  //  After all values are parsed, let’s make sure our our
  //  pixel distance is negative for top and left entrances.
  //
  //  ie. "move 25px from top" starts at 'top: -25px' in CSS.

      if (enter == "top" || enter == "left") {
        if (parsed.move) {
          parsed.move = "-" + parsed.move;
        }
        else {
          parsed.move = "-" + this.options.move;
        }
      }

      var dist    = parsed.move    || this.options.move,
          dur     = parsed.over    || this.options.over,
          delay   = parsed.after   || this.options.after,
          easing  = parsed.easing  || this.options.easing,
          opacity = parsed.opacity || this.options.opacity;

      var transition = "-webkit-transition: -webkit-transform " + dur + " " + easing + " " + delay + ",  opacity " + dur + " " + easing + " " + delay + ";" +
                               "transition: transform " + dur + " " + easing + " " + delay + ", opacity " + dur + " " + easing + " " + delay + ";" +
                      "-webkit-perspective: 1000;" +
              "-webkit-backface-visibility: hidden;";

  //  The same as transition, but removing the delay for elements fading out.
      var reset = "-webkit-transition: -webkit-transform " + dur + " " + easing + " 0s,  opacity " + dur + " " + easing + " " + delay + ";" +
                          "transition: transform " + dur + " " + easing + " 0s,  opacity " + dur + " " + easing + " " + delay + ";" +
                 "-webkit-perspective: 1000;" +
         "-webkit-backface-visibility: hidden;";

      var initial = "-webkit-transform: translate" + axis + "(" + dist + ");" +
                            "transform: translate" + axis + "(" + dist + ");" +
                              "opacity: " + opacity + ";";

      var target = "-webkit-transform: translate" + axis + "(0);" +
                           "transform: translate" + axis + "(0);" +
                             "opacity: 1;";
      return {
        transition: transition,
        initial: initial,
        target: target,
        reset: reset,
        totalDuration: ((parseFloat(dur) + parseFloat(delay)) * 1000)
      };
    },

    getViewportH : function () {
      var client = this.docElem['clientHeight'],
        inner = window['innerHeight'];

      if (this.docElem == window.document.documentElement)
                return (client < inner) ? inner : client;
            else
                return client;
    },

    getOffset : function(el) {
      var offsetTop = 0,
          offsetLeft = 0;

      do {
        if (!isNaN(el.offsetTop)) {
          offsetTop += el.offsetTop;
        }
        if (!isNaN(el.offsetLeft)) {
          offsetLeft += el.offsetLeft;
        }
      } while (el = el.offsetParent)

      return {
        top: offsetTop,
        left: offsetLeft
      }
    },

    isElementInViewport : function(el, h) {
      var scrolled = this.docElem.scrollTop + this.docElem.offsetTop;
        if (this.docElem == window.document.documentElement)scrolled = window.pageYOffset;
        var
            viewed = scrolled + this.getViewportH(),
          elH = el.offsetHeight,
          elTop = this.getOffset(el).top,
          elBottom = elTop + elH,
          h = h || 0;

      return (elTop + elH * h) <= viewed
          && (elBottom) >= scrolled
          || (el.currentStyle? el.currentStyle : window.getComputedStyle(el, null)).position == 'fixed';
    },

    extend: function (a, b){
      for (var key in b) {
        if (b.hasOwnProperty(key)) {
          a[key] = b[key];
        }
      }
      return a;
    }
  }; // end scrollReveal.prototype

  return scrollReveal;
})(window);