基本方法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、JavaScriptwindow.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);
动态HTMLscrollReveal.init() 方法可以检测所有含有 data-scroll-reveal 属性的元素，并进行初始化，所以对于动态加载的元素，可以这样操作：var config = {enter: 'bottom',move: '40px',over: '0.16s',reset: true,init: false
};
window.scrollReveal =new scrollReveal(config);
vardata= {newElementHtml: 'dowebok.com'};
var container = document.getElementById('#container');
container.innerHTML(data.newElementHTML);
scrollReveal.init();
DEMO
<htmllang="zh-CN"><head><title>scrollReveal.js演示1_doweboktitle><metacharset="utf-8"><style>* {margin:0;padding:0;}.dowebok{font-family:"Microsoft Yahei";background-color:#202a39;}.dowebokh1{margin:80px 050px;font-size:60px;font-weight:500;color: red;text-align: center;}.dowebokh2{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:020px;*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><bodyclass="dowebok"><h1data-scroll-reveal="enter from the top over 1.5s">scrollReveal.jsh1><h2data-scroll-reveal="enter bottom but wait 1s">——页面滚动显示动画 JavaScript，不支持 IE6 - IE9h2><h2data-scroll-reveal="wait 2.5s and then ease-in-out 100px">iPhone 6h2><divclass="column-container clearfix"><divclass="column"><divclass="block block-1x block-slate"data-scroll-reveal="enter top over 3s after 0.5s">div><divclass="block block-2x block-mango"data-scroll-reveal="enter right after 0.5s">div><divclass="block block-1x block-kiwi"data-scroll-reveal="enter bottom over 1s and move 300px after 0.3s">div><divclass="block block-3x block-blueberry"data-scroll-reveal="enter top over 0.5s and move 200px">div><divclass="block block-2x block-raspberry"data-scroll-reveal="enter bottom over 1s and move 100px">div><divclass="block block-1x block-grape"data-scroll-reveal="enter top">div>div><divclass="column"><divclass="block block-3x block-kiwi"data-scroll-reveal="enter bottom over 1s and move 300px after 0.3s">div><divclass="block block-1x block-orange"data-scroll-reveal="enter right">div><divclass="block block-2x block-grape"data-scroll-reveal="enter top">div><divclass="block block-1x block-orange"data-scroll-reveal="enter left">div><divclass="block block-1x block-grape"data-scroll-reveal="enter top">div><divclass="block block-2x block-slate"data-scroll-reveal="enter top over 3s after 0.5s">div>div><divclass="column"><divclass="block block-2x block-raspberry"data-scroll-reveal="enter bottom over 1s and move 100px">div><divclass="block block-1x block-blueberry"data-scroll-reveal="enter top over 0.5s and move 200px">div><divclass="block block-2x block-slate"data-scroll-reveal="enter top over 3s after 0.5s">div><divclass="block block-1x block-mango"data-scroll-reveal="enter right after 0.5s">div><divclass="block block-1x block-slate"data-scroll-reveal="enter top over 3s after 0.5s">div><divclass="block block-3x block-orange"data-scroll-reveal="enter left">div>div><divclass="column"><divclass="block block-1x block-orange"data-scroll-reveal="enter left">div><divclass="block block-2x block-grape"data-scroll-reveal="enter top">div><divclass="block block-3x block-raspberry"data-scroll-reveal="enter bottom over 1s and move 100px">div><divclass="block block-1x block-blueberry"data-scroll-reveal="enter top over 0.5s and move 200px">div><divclass="block block-2x block-kiwi"data-scroll-reveal="enter bottom over 1s and move 300px after 0.3s">div><divclass="block block-1x block-mango"data-scroll-reveal="enter right after 0.5s">div>div><divclass="column"><divclass="block block-3x block-mango"data-scroll-reveal="enter right after 0.5s">div><divclass="block block-1x block-kiwi"data-scroll-reveal="enter bottom over 1s and move 300px after 0.3s">div><divclass="block block-2x block-orange"data-scroll-reveal="enter left">div><divclass="block block-1x block-grape"data-scroll-reveal="enter top">div><divclass="block block-1x block-slate"data-scroll-reveal="enter top over 3s after 0.5s">div><divclass="block block-2x block-raspberry"data-scroll-reveal="enter bottom over 1s and move 100px">div>div><divclass="column"><divclass="block block-1x block-kiwi"data-scroll-reveal="enter bottom over 1s and move 300px after 0.3s">div><divclass="block block-3x block-slate"data-scroll-reveal="enter top over 3s after 0.5s">div><divclass="block block-1x block-blueberry"data-scroll-reveal="enter top over 0.5s and move 200px">div><divclass="block block-3x block-kiwi"data-scroll-reveal="enter bottom over 1s and move 300px after 0.3s">div><divclass="block block-1x block-orange"data-scroll-reveal="enter left">div><divclass="block block-1x block-blueberry"data-scroll-reveal="enter top over 0.5s and move 200px">div>div><divclass="column"><divclass="block block-2x block-blueberry"data-scroll-reveal="enter top over 0.5s and move 200px">div><divclass="block block-1x block-raspberry"data-scroll-reveal="enter bottom over 1s and move 100px">div><divclass="block block-1x block-mango"data-scroll-reveal="enter right after 0.5s">div><divclass="block block-3x block-raspberry"data-scroll-reveal="enter bottom over 1s and move 100px">div><divclass="block block-2x block-mango"data-scroll-reveal="enter right after 0.5s">div><divclass="block block-1x block-slate"data-scroll-reveal="enter top over 3s after 0.5s">div>div><divclass="column"><divclass="block block-1x block-grape"data-scroll-reveal="enter top">div><divclass="block block-2x block-orange"data-scroll-reveal="enter left">div><divclass="block block-1x block-grape"data-scroll-reveal="enter top">div><divclass="block block-3x block-slate"data-scroll-reveal="enter top over 3s after 0.5s">div><divclass="block block-1x block-blueberry"data-scroll-reveal="enter top over 0.5s and move 200px">div><divclass="block block-2x block-kiwi"data-scroll-reveal="enter bottom over 1s and move 300px after 0.3s">div>div>div><scriptsrc="js/scrollReveal.js">script><script>(function() {window.scrollReveal = new scrollReveal({reset: true, //执行几次 truemove: '50px'});})();script><style>.dowebok.vad{margin:50px 05px;padding-bottom:150px;font-family: Consolas, arial, 宋体;text-align: center;}.dowebok.vada{display: inline-block;height:36px;line-height:36px;margin:05px;padding:050px;font-size:14px;text-align: center;color:#eee;text-decoration: none;background-color:#222;}.dowebok.vada:hover{color:#fff;background-color:#000;}.dowebok.thead{width:728px;height:90px;margin:0 auto;border-bottom:40px solid transparent;}style><pclass="vad"><ahref="http://www.dowebok.com/"target="_blank">dowebok.coma><ahref="http://www.dowebok.com/134.html"target="_blank">说 明a><ahref="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-idvar nextId = 1;/*** RequestAnimationFrame polyfill* @function* @private*/var requestAnimFrame = (function() {return window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||function(callback) {window.setTimeout(callback, 1000 / 60);};}());functionscrollReveal(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 visibleviewportFactor: 0.33,// if false, animations occur only once// if true, animations occur each time an element enters the viewportreset: false,// if true, scrollReveal.init() is automaticaly called upon instantiationinit: 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 attributevar 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, exitif (!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);}functiondelayed() {self._scrollPage();self.resizeTimeout = null;}self.resizeTimeout = setTimeout(delayed, 200);};// captureScrollif (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 = {};functionfilter(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.enteraxis = "y";}if (this.options.enter == "left" || this.options.enter == "right") {enter = this.options.enteraxis = "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;elsereturn 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;varviewed = 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.prototypereturn scrollReveal;
})(window);
