苗景云的博客-解密小米魅族等网站在可视区域加载动画

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

2016-10-11 浏览:1863

‍‍废话不多说，直接上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、引入文件

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>

高级用法

自定义默认值

可以更改 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>

<head>

<title>scrollReveal.js演示1_dowebok</title>

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

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

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

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

<a href="http://www.dowebok.com/" target="_blank">dowebok.com</a>

</p>

</body>

</html>

_ _ _____ _ _

| | | __ \ | | (_)

___ ___ _ __ ___ | | | |__) |_____ _____ __ _| | _ ___

/ __|/ __| '__/ _ \| | | _ // _ \ \ / / _ \/ _` | | | / __|

\__ \ (__| | | (_) | | | | \ \ __/\ V / __/ (_| | |_| \__ \

|___/\___|_| \___/|_|_|_| \_\___| \_/ \___|\__,_|_(_) |___/ v.0.1.3

_/ |

|__/

"Declarative on-scroll reveal animations."

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

Licensed under the MIT license.

http://www.opensource.org/licenses/mit-license.php

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

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

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

评论:(0)复制地址

QQ空间新浪微博腾讯微博人人网网易微博更多

发布:苗景云 | 分类:IT技术&设计 | Tags:

上一篇：PHPCMS组图排序功能下一篇：PHPCMS留言板实现异步提交前后端修改方法

发表评论:

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

苗景云的博客

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

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

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

DEMO

相关文章

发表评论: