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

xiaoxiao2024-11-29 6

用这个：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">  <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>  <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>  <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>  <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>  <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>  <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>  <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>  <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);

转载请注明原文地址: https://ju.6miu.com/read-1294085.html

最新回复(0)