Создание анимации с Animate.css
Несмотря на все трудности возникающие при создании анимации, безусловно стоит стремиться к получению навыков, приобретению уверенности и достижению мастерства в этой области. Ден Эден – дизайнер и студент из Манчестера (Великобритания) — создал своеобразную библиотеку анимации Animate.css. По его словам, изначально идея возникла для оптимизации собственного времени на разработку проектов, а затем приобрела большие масштабы. Теперь все желающие могут ознакомиться с ней и использовать в своих проектах.
«При реализации нескольких своих проектов я работал с анимацией CSS3 по ключевым кадрам и заметил, что повторяю код. Чтобы не делать это в будущем я начал создавать анимационную библиотеку. После завершения я был доволен собой и выпустил код на GitHub, где его и можно взять».
Как же на практике применять библиотеку Animate.css? В действительности всё происходит достаточно просто, надо лишь один раз пройти все этапы, а потом по аналогии повторять некоторые действия.
1. Для начала следует скачать и подключить библиотеку.
- Полная версия. Содержит более трёх тысяч строк кода объёмом около 60 кБ. Она хорошо подходит для первого этапа ознакомления с анимацией в целом, поскольку позволяет разобраться в том, как это всё устроено.
- Упакованная версия (обфусцированная, говоря профессиональным языком). В css-файле нет табуляции, пробелов и переносов строк. Объём файла за счёт этого сокращается раза в полтора, но читать код при этом становится затруднительно.
Далее подключаем файл animate.css через тег <link> как это делается с любым другим стилевым файлом.
<link href="style/animate.css" rel="stylesheet">
2. Чтобы применить эффект анимации к желаемому элементу, добавляем к нему два класса — animated и класс с названием эффекта. Например, вы хотите добавить мерцание ко всем изображениям на странице. В HTML записываем следующее:
<img src="images/figure.jpg" alt="Винни-Пух" class="animated flash">
Вот некоторые классы для использования на ваших сайтах:
Attention seekers: flash bounce shake tada swing wobble pulse Flippers (currently Webkit, Firefox, & IE10 only): flip flipInX flipOutX flipInY flipOutY Fading entrances: fadeIn fadeInUp fadeInDown fadeInLeft fadeInRight fadeInUpBig fadeInDownBig fadeInLeftBig fadeInRightBig Fading exits: fadeOut fadeOutUp fadeOutDown fadeOutLeft fadeOutRight fadeOutUpBig fadeOutDownBig fadeOutLeftBig fadeOutRightBig Bouncing entrances: bounceIn bounceInDown bounceInUp bounceInLeft bounceInRight Bouncing exits: bounceOut bounceOutDown bounceOutUp bounceOutLeft bounceOutRight Rotating entrances: rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight Rotating exits: rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight Lightspeed: lightSpeedIn lightSpeedOut Specials: hinge rollIn rollOut
Если на сайте используется jQuery, то добавление классов упрощается и делается через JavaScript.
<script>
$(document).ready(function() {
$ ('img').addClass ('animated flash');
})
</script>
3. Сама анимация включается автоматически при загрузке страницы. Это удобно для всплывающих сообщений, призванных привлечь внимание пользователя (пример 1).
Пример 1. Всплывающее сообщение
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Предупреждение</title>
<link href="style/animate.css" rel="stylesheet">
<style>
.warning
background:#fc0;
padding:10px;
border: 1px solid#000;
}
</style>
</head>
<body>
<div class="animated fadeInDown warning">
Зенитное часовое число оценивает экваториальный секстант!
</div>
</body>
</html>
Чтобы эффект срабатывал при наведении на элемент курсора мыши, придётся использовать JavaScript. В качестве примера рассмотрим картинки, которые двигаются при наведении на них курсора мыши. К тегу <img> добавляем класс animated и подключаем jQuery (пример 2).
Пример 2. Галерея
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Предупреждение</title>
<link href="style/animate.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
<script>
$(document).ready(function () {
$('img.animated').hover(
function () {
$(this) .addClass('bounce'); // Добавляем класс bounce
},
function () {
$(this) .removeClass('bounce'); // Убираем класс bounce
}
)})
</script>
</head>
<body>
<img src="images/thumb1.jpg" alt="" class="animated">
<img src="images/thumb2.jpg" alt="" class="animated">
<img src="images/thumb3.jpg" alt="" class="animated">
</body>
</html>
В данном примере при наведении курсора на изображение с классом animated добавляется ещё один класс bounce; если курсор убрать, то класс bounce также убирается.
4. Окончательно можно настроить анимацию по своему вкусу, изменив ее скорость, а также задав время задержки через CSS. И то и другое не обязательно и применяется при необходимости.
.animated {
-webkit-animation-duration: .6s;
-o-animation-duration: .6s;
-moz-animation-duration: .6s;
animation-duration: .6s;
-webkit-animation-delay: 1s;
-o-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
Стоит отметить, что эффекты, представленные в Animate.css удобнее, быстрее и изящнее, чем некоторые из аналогичных в JavaScript. И если вы хотите получить несколько быстрых эффектов, Animate.css – отличный выбор.
Полный список классов:
bounce
flash
pulse
rubberBand
shake
swing
tada
wobble
jello
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
hinge
rollIn
rollOut
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
slideInDown
slideInLeft
slideInRight
slideInUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUpАвтор — htmlbook.ru, Animate.css.
Недостаток animate.css заключается в том, что это всего лишь обычный набор CSS-правил завязанных на анимации. То есть они проигрываются сразу после загрузки страницы. И если анимируемые элементы не видны на “первом” экране, то всю эту красоту посетители просто не увидят. Ведь она проиграется еще до того, как они перемотают страницу к нужному месту.
Скрипт wow.js облегчает работу. Ведь теперь нам не надо будет писать и копаться в js-коде. WOW.js – это маленькая библиотека, которая позволяет включать анимацию на определенном этапе прокрутки страницы. Весит очень мало, и к тому же полностью самостоятельна – то есть нет необходимости подключать jQuery или других монстров.
wow.min.js (8kb)
/*! WOW - v1.0.2 - 2014-10-28
* Copyright (c) 2014 Matthieu Aussaguel; Licensed MIT */(function(){var a,b,c,d,e,f=function(a,b){return function(){return a.apply(b,arguments)}},g=[].indexOf||function(a){for(var b=0,c=this.length;c>b;b++)if(b in this&&this[b]===a)return b;return-1};b=function(){function a(){}return a.prototype.extend=function(a,b){var c,d;for(c in b)d=b[c],null==a[c]&&(a[c]=d);return a},a.prototype.isMobile=function(a){return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(a)},a.prototype.addEvent=function(a,b,c){return null!=a.addEventListener?a.addEventListener(b,c,!1):null!=a.attachEvent?a.attachEvent("on"+b,c):a[b]=c},a.prototype.removeEvent=function(a,b,c){return null!=a.removeEventListener?a.removeEventListener(b,c,!1):null!=a.detachEvent?a.detachEvent("on"+b,c):delete a[b]},a.prototype.innerHeight=function(){return"innerHeight"in window?window.innerHeight:document.documentElement.clientHeight},a}(),c=this.WeakMap||this.MozWeakMap||(c=function(){function a(){this.keys=[],this.values=[]}return a.prototype.get=function(a){var b,c,d,e,f;for(f=this.keys,b=d=0,e=f.length;e>d;b=++d)if(c=f[b],c===a)return this.values[b]},a.prototype.set=function(a,b){var c,d,e,f,g;for(g=this.keys,c=e=0,f=g.length;f>e;c=++e)if(d=g[c],d===a)return void(this.values[c]=b);return this.keys.push(a),this.values.push(b)},a}()),a=this.MutationObserver||this.WebkitMutationObserver||this.MozMutationObserver||(a=function(){function a(){"undefined"!=typeof console&&null!==console&&console.warn("MutationObserver is not supported by your browser."),"undefined"!=typeof console&&null!==console&&console.warn("WOW.js cannot detect dom mutations, please call .sync() after loading new content.")}return a.notSupported=!0,a.prototype.observe=function(){},a}()),d=this.getComputedStyle||function(a){return this.getPropertyValue=function(b){var c;return"float"===b&&(b="styleFloat"),e.test(b)&&b.replace(e,function(a,b){return b.toUpperCase()}),(null!=(c=a.currentStyle)?c[b]:void 0)||null},this},e=/(\-([a-z]){1})/g,this.WOW=function(){function e(a){null==a&&(a={}),this.scrollCallback=f(this.scrollCallback,this),this.scrollHandler=f(this.scrollHandler,this),this.start=f(this.start,this),this.scrolled=!0,this.config=this.util().extend(a,this.defaults),this.animationNameCache=new c}return e.prototype.defaults={boxClass:"wow",animateClass:"animated",offset:0,mobile:!0,live:!0},e.prototype.init=function(){var a;return this.element=window.document.documentElement,"interactive"===(a=document.readyState)||"complete"===a?this.start():this.util().addEvent(document,"DOMContentLoaded",this.start),this.finished=[]},e.prototype.start=function(){var b,c,d,e;if(this.stopped=!1,this.boxes=function(){var a,c,d,e;for(d=this.element.querySelectorAll("."+this.config.boxClass),e=[],a=0,c=d.length;c>a;a++)b=d[a],e.push(b);return e}.call(this),this.all=function(){var a,c,d,e;for(d=this.boxes,e=[],a=0,c=d.length;c>a;a++)b=d[a],e.push(b);return e}.call(this),this.boxes.length)if(this.disabled())this.resetStyle();else for(e=this.boxes,c=0,d=e.length;d>c;c++)b=e[c],this.applyStyle(b,!0);return this.disabled()||(this.util().addEvent(window,"scroll",this.scrollHandler),this.util().addEvent(window,"resize",this.scrollHandler),this.interval=setInterval(this.scrollCallback,50)),this.config.live?new a(function(a){return function(b){var c,d,e,f,g;for(g=[],e=0,f=b.length;f>e;e++)d=b[e],g.push(function(){var a,b,e,f;for(e=d.addedNodes||[],f=[],a=0,b=e.length;b>a;a++)c=e[a],f.push(this.doSync(c));return f}.call(a));return g}}(this)).observe(document.body,{childList:!0,subtree:!0}):void 0},e.prototype.stop=function(){return this.stopped=!0,this.util().removeEvent(window,"scroll",this.scrollHandler),this.util().removeEvent(window,"resize",this.scrollHandler),null!=this.interval?clearInterval(this.interval):void 0},e.prototype.sync=function(){return a.notSupported?this.doSync(this.element):void 0},e.prototype.doSync=function(a){var b,c,d,e,f;if(null==a&&(a=this.element),1===a.nodeType){for(a=a.parentNode||a,e=a.querySelectorAll("."+this.config.boxClass),f=[],c=0,d=e.length;d>c;c++)b=e[c],g.call(this.all,b)<0?(this.boxes.push(b),this.all.push(b),this.stopped||this.disabled()?this.resetStyle():this.applyStyle(b,!0),f.push(this.scrolled=!0)):f.push(void 0);return f}},e.prototype.show=function(a){return this.applyStyle(a),a.className=""+a.className+" "+this.config.animateClass},e.prototype.applyStyle=function(a,b){var c,d,e;return d=a.getAttribute("data-wow-duration"),c=a.getAttribute("data-wow-delay"),e=a.getAttribute("data-wow-iteration"),this.animate(function(f){return function(){return f.customStyle(a,b,d,c,e)}}(this))},e.prototype.animate=function(){return"requestAnimationFrame"in window?function(a){return window.requestAnimationFrame(a)}:function(a){return a()}}(),e.prototype.resetStyle=function(){var a,b,c,d,e;for(d=this.boxes,e=[],b=0,c=d.length;c>b;b++)a=d[b],e.push(a.style.visibility="visible");return e},e.prototype.customStyle=function(a,b,c,d,e){return b&&this.cacheAnimationName(a),a.style.visibility=b?"hidden":"visible",c&&this.vendorSet(a.style,{animationDuration:c}),d&&this.vendorSet(a.style,{animationDelay:d}),e&&this.vendorSet(a.style,{animationIterationCount:e}),this.vendorSet(a.style,{animationName:b?"none":this.cachedAnimationName(a)}),a},e.prototype.vendors=["moz","webkit"],e.prototype.vendorSet=function(a,b){var c,d,e,f;f=[];for(c in b)d=b[c],a[""+c]=d,f.push(function(){var b,f,g,h;for(g=this.vendors,h=[],b=0,f=g.length;f>b;b++)e=g[b],h.push(a[""+e+c.charAt(0).toUpperCase()+c.substr(1)]=d);return h}.call(this));return f},e.prototype.vendorCSS=function(a,b){var c,e,f,g,h,i;for(e=d(a),c=e.getPropertyCSSValue(b),i=this.vendors,g=0,h=i.length;h>g;g++)f=i[g],c=c||e.getPropertyCSSValue("-"+f+"-"+b);return c},e.prototype.animationName=function(a){var b;try{b=this.vendorCSS(a,"animation-name").cssText}catch(c){b=d(a).getPropertyValue("animation-name")}return"none"===b?"":b},e.prototype.cacheAnimationName=function(a){return this.animationNameCache.set(a,this.animationName(a))},e.prototype.cachedAnimationName=function(a){return this.animationNameCache.get(a)},e.prototype.scrollHandler=function(){return this.scrolled=!0},e.prototype.scrollCallback=function(){var a;return!this.scrolled||(this.scrolled=!1,this.boxes=function(){var b,c,d,e;for(d=this.boxes,e=[],b=0,c=d.length;c>b;b++)a=d[b],a&&(this.isVisible(a)?this.show(a):e.push(a));return e}.call(this),this.boxes.length||this.config.live)?void 0:this.stop()},e.prototype.offsetTop=function(a){for(var b;void 0===a.offsetTop;)a=a.parentNode;for(b=a.offsetTop;a=a.offsetParent;)b+=a.offsetTop;return b},e.prototype.isVisible=function(a){var b,c,d,e,f;return c=a.getAttribute("data-wow-offset")||this.config.offset,f=window.pageYOffset,e=f+Math.min(this.element.clientHeight,this.util().innerHeight())-c,d=this.offsetTop(a),b=d+a.clientHeight,e>=d&&b>=f},e.prototype.util=function(){return null!=this._util?this._util:this._util=new b},e.prototype.disabled=function(){return!this.config.mobile&&this.util().isMobile(navigator.userAgent)},e}()}).call(this);wow.js (15kb)
(function() {
var MutationObserver, Util, WeakMap, getComputedStyle, getComputedStyleRX,
bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
Util = (function() {
function Util() {}
Util.prototype.extend = function(custom, defaults) {
var key, value;
for (key in defaults) {
value = defaults[key];
if (custom[key] == null) {
custom[key] = value;
}
}
return custom;
};
Util.prototype.isMobile = function(agent) {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(agent);
};
Util.prototype.createEvent = function(event, bubble, cancel, detail) {
var customEvent;
if (bubble == null) {
bubble = false;
}
if (cancel == null) {
cancel = false;
}
if (detail == null) {
detail = null;
}
if (document.createEvent != null) {
customEvent = document.createEvent('CustomEvent');
customEvent.initCustomEvent(event, bubble, cancel, detail);
} else if (document.createEventObject != null) {
customEvent = document.createEventObject();
customEvent.eventType = event;
} else {
customEvent.eventName = event;
}
return customEvent;
};
Util.prototype.emitEvent = function(elem, event) {
if (elem.dispatchEvent != null) {
return elem.dispatchEvent(event);
} else if (event in (elem != null)) {
return elem[event]();
} else if (("on" + event) in (elem != null)) {
return elem["on" + event]();
}
};
Util.prototype.addEvent = function(elem, event, fn) {
if (elem.addEventListener != null) {
return elem.addEventListener(event, fn, false);
} else if (elem.attachEvent != null) {
return elem.attachEvent("on" + event, fn);
} else {
return elem[event] = fn;
}
};
Util.prototype.removeEvent = function(elem, event, fn) {
if (elem.removeEventListener != null) {
return elem.removeEventListener(event, fn, false);
} else if (elem.detachEvent != null) {
return elem.detachEvent("on" + event, fn);
} else {
return delete elem[event];
}
};
Util.prototype.innerHeight = function() {
if ('innerHeight' in window) {
return window.innerHeight;
} else {
return document.documentElement.clientHeight;
}
};
return Util;
})();
WeakMap = this.WeakMap || this.MozWeakMap || (WeakMap = (function() {
function WeakMap() {
this.keys = [];
this.values = [];
}
WeakMap.prototype.get = function(key) {
var i, item, j, len, ref;
ref = this.keys;
for (i = j = 0, len = ref.length; j < len; i = ++j) {
item = ref[i];
if (item === key) {
return this.values[i];
}
}
};
WeakMap.prototype.set = function(key, value) {
var i, item, j, len, ref;
ref = this.keys;
for (i = j = 0, len = ref.length; j < len; i = ++j) {
item = ref[i];
if (item === key) {
this.values[i] = value;
return;
}
}
this.keys.push(key);
return this.values.push(value);
};
return WeakMap;
})());
MutationObserver = this.MutationObserver || this.WebkitMutationObserver || this.MozMutationObserver || (MutationObserver = (function() {
function MutationObserver() {
if (typeof console !== "undefined" && console !== null) {
console.warn('MutationObserver is not supported by your browser.');
}
if (typeof console !== "undefined" && console !== null) {
console.warn('WOW.js cannot detect dom mutations, please call .sync() after loading new content.');
}
}
MutationObserver.notSupported = true;
MutationObserver.prototype.observe = function() {};
return MutationObserver;
})());
getComputedStyle = this.getComputedStyle || function(el, pseudo) {
this.getPropertyValue = function(prop) {
var ref;
if (prop === 'float') {
prop = 'styleFloat';
}
if (getComputedStyleRX.test(prop)) {
prop.replace(getComputedStyleRX, function(_, _char) {
return _char.toUpperCase();
});
}
return ((ref = el.currentStyle) != null ? ref[prop] : void 0) || null;
};
return this;
};
getComputedStyleRX = /(\-([a-z]){1})/g;
this.WOW = (function() {
WOW.prototype.defaults = {
boxClass: 'wow',
animateClass: 'animated',
offset: 0,
mobile: true,
live: true,
callback: null,
scrollContainer: null
};
function WOW(options) {
if (options == null) {
options = {};
}
this.scrollCallback = bind(this.scrollCallback, this);
this.scrollHandler = bind(this.scrollHandler, this);
this.resetAnimation = bind(this.resetAnimation, this);
this.start = bind(this.start, this);
this.scrolled = true;
this.config = this.util().extend(options, this.defaults);
if (options.scrollContainer != null) {
this.config.scrollContainer = document.querySelector(options.scrollContainer);
}
this.animationNameCache = new WeakMap();
this.wowEvent = this.util().createEvent(this.config.boxClass);
}
WOW.prototype.init = function() {
var ref;
this.element = window.document.documentElement;
if ((ref = document.readyState) === "interactive" || ref === "complete") {
this.start();
} else {
this.util().addEvent(document, 'DOMContentLoaded', this.start);
}
return this.finished = [];
};
WOW.prototype.start = function() {
var box, j, len, ref;
this.stopped = false;
this.boxes = (function() {
var j, len, ref, results;
ref = this.element.querySelectorAll("." + this.config.boxClass);
results = [];
for (j = 0, len = ref.length; j < len; j++) {
box = ref[j];
results.push(box);
}
return results;
}).call(this);
this.all = (function() {
var j, len, ref, results;
ref = this.boxes;
results = [];
for (j = 0, len = ref.length; j < len; j++) {
box = ref[j];
results.push(box);
}
return results;
}).call(this);
if (this.boxes.length) {
if (this.disabled()) {
this.resetStyle();
} else {
ref = this.boxes;
for (j = 0, len = ref.length; j < len; j++) {
box = ref[j];
this.applyStyle(box, true);
}
}
}
if (!this.disabled()) {
this.util().addEvent(this.config.scrollContainer || window, 'scroll', this.scrollHandler);
this.util().addEvent(window, 'resize', this.scrollHandler);
this.interval = setInterval(this.scrollCallback, 50);
}
if (this.config.live) {
return new MutationObserver((function(_this) {
return function(records) {
var k, len1, node, record, results;
results = [];
for (k = 0, len1 = records.length; k < len1; k++) {
record = records[k];
results.push((function() {
var l, len2, ref1, results1;
ref1 = record.addedNodes || [];
results1 = [];
for (l = 0, len2 = ref1.length; l < len2; l++) {
node = ref1[l];
results1.push(this.doSync(node));
}
return results1;
}).call(_this));
}
return results;
};
})(this)).observe(document.body, {
childList: true,
subtree: true
});
}
};
WOW.prototype.stop = function() {
this.stopped = true;
this.util().removeEvent(this.config.scrollContainer || window, 'scroll', this.scrollHandler);
this.util().removeEvent(window, 'resize', this.scrollHandler);
if (this.interval != null) {
return clearInterval(this.interval);
}
};
WOW.prototype.sync = function(element) {
if (MutationObserver.notSupported) {
return this.doSync(this.element);
}
};
WOW.prototype.doSync = function(element) {
var box, j, len, ref, results;
if (element == null) {
element = this.element;
}
if (element.nodeType !== 1) {
return;
}
element = element.parentNode || element;
ref = element.querySelectorAll("." + this.config.boxClass);
results = [];
for (j = 0, len = ref.length; j < len; j++) {
box = ref[j];
if (indexOf.call(this.all, box) < 0) {
this.boxes.push(box);
this.all.push(box);
if (this.stopped || this.disabled()) {
this.resetStyle();
} else {
this.applyStyle(box, true);
}
results.push(this.scrolled = true);
} else {
results.push(void 0);
}
}
return results;
};
WOW.prototype.show = function(box) {
this.applyStyle(box);
box.className = box.className + " " + this.config.animateClass;
if (this.config.callback != null) {
this.config.callback(box);
}
this.util().emitEvent(box, this.wowEvent);
this.util().addEvent(box, 'animationend', this.resetAnimation);
this.util().addEvent(box, 'oanimationend', this.resetAnimation);
this.util().addEvent(box, 'webkitAnimationEnd', this.resetAnimation);
this.util().addEvent(box, 'MSAnimationEnd', this.resetAnimation);
return box;
};
WOW.prototype.applyStyle = function(box, hidden) {
var delay, duration, iteration;
duration = box.getAttribute('data-wow-duration');
delay = box.getAttribute('data-wow-delay');
iteration = box.getAttribute('data-wow-iteration');
return this.animate((function(_this) {
return function() {
return _this.customStyle(box, hidden, duration, delay, iteration);
};
})(this));
};
WOW.prototype.animate = (function() {
if ('requestAnimationFrame' in window) {
return function(callback) {
return window.requestAnimationFrame(callback);
};
} else {
return function(callback) {
return callback();
};
}
})();
WOW.prototype.resetStyle = function() {
var box, j, len, ref, results;
ref = this.boxes;
results = [];
for (j = 0, len = ref.length; j < len; j++) {
box = ref[j];
results.push(box.style.visibility = 'visible');
}
return results;
};
WOW.prototype.resetAnimation = function(event) {
var target;
if (event.type.toLowerCase().indexOf('animationend') >= 0) {
target = event.target || event.srcElement;
return target.className = target.className.replace(this.config.animateClass, '').trim();
}
};
WOW.prototype.customStyle = function(box, hidden, duration, delay, iteration) {
if (hidden) {
this.cacheAnimationName(box);
}
box.style.visibility = hidden ? 'hidden' : 'visible';
if (duration) {
this.vendorSet(box.style, {
animationDuration: duration
});
}
if (delay) {
this.vendorSet(box.style, {
animationDelay: delay
});
}
if (iteration) {
this.vendorSet(box.style, {
animationIterationCount: iteration
});
}
this.vendorSet(box.style, {
animationName: hidden ? 'none' : this.cachedAnimationName(box)
});
return box;
};
WOW.prototype.vendors = ["moz", "webkit"];
WOW.prototype.vendorSet = function(elem, properties) {
var name, results, value, vendor;
results = [];
for (name in properties) {
value = properties[name];
elem["" + name] = value;
results.push((function() {
var j, len, ref, results1;
ref = this.vendors;
results1 = [];
for (j = 0, len = ref.length; j < len; j++) {
vendor = ref[j];
results1.push(elem["" + vendor + (name.charAt(0).toUpperCase()) + (name.substr(1))] = value);
}
return results1;
}).call(this));
}
return results;
};
WOW.prototype.vendorCSS = function(elem, property) {
var j, len, ref, result, style, vendor;
style = getComputedStyle(elem);
result = style.getPropertyCSSValue(property);
ref = this.vendors;
for (j = 0, len = ref.length; j < len; j++) {
vendor = ref[j];
result = result || style.getPropertyCSSValue("-" + vendor + "-" + property);
}
return result;
};
WOW.prototype.animationName = function(box) {
var animationName;
try {
animationName = this.vendorCSS(box, 'animation-name').cssText;
} catch (_error) {
animationName = getComputedStyle(box).getPropertyValue('animation-name');
}
if (animationName === 'none') {
return '';
} else {
return animationName;
}
};
WOW.prototype.cacheAnimationName = function(box) {
return this.animationNameCache.set(box, this.animationName(box));
};
WOW.prototype.cachedAnimationName = function(box) {
return this.animationNameCache.get(box);
};
WOW.prototype.scrollHandler = function() {
return this.scrolled = true;
};
WOW.prototype.scrollCallback = function() {
var box;
if (this.scrolled) {
this.scrolled = false;
this.boxes = (function() {
var j, len, ref, results;
ref = this.boxes;
results = [];
for (j = 0, len = ref.length; j < len; j++) {
box = ref[j];
if (!(box)) {
continue;
}
if (this.isVisible(box)) {
this.show(box);
continue;
}
results.push(box);
}
return results;
}).call(this);
if (!(this.boxes.length || this.config.live)) {
return this.stop();
}
}
};
WOW.prototype.offsetTop = function(element) {
var top;
while (element.offsetTop === void 0) {
element = element.parentNode;
}
top = element.offsetTop;
while (element = element.offsetParent) {
top += element.offsetTop;
}
return top;
};
WOW.prototype.isVisible = function(box) {
var bottom, offset, top, viewBottom, viewTop;
offset = box.getAttribute('data-wow-offset') || this.config.offset;
viewTop = (this.config.scrollContainer && this.config.scrollContainer.scrollTop) || window.pageYOffset;
viewBottom = viewTop + Math.min(this.element.clientHeight, this.util().innerHeight()) - offset;
top = this.offsetTop(box);
bottom = top + box.clientHeight;
return top <= viewBottom && bottom >= viewTop;
};
WOW.prototype.util = function() {
return this._util != null ? this._util : this._util = new Util();
};
WOW.prototype.disabled = function() {
return !this.config.mobile && this.util().isMobile(navigator.userAgent);
};
return WOW;
})();
}).call(this);
Подключаем скрипты простым HTML кодом на странице в теге <head> :
<link rel="stylesheet" href="animate.min.css"> <script src="wow.min.js"></script>
Или подключаем внешний cdn вариант:
https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js или https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js
Необходимо инициализировать скрипт добавив вот такой код, сразу после его подключения:
<script> new WOW().init(); </script>
Использование WOW.js
Выбираем элемент, который хотим анимировать и добавляем ему класс class="wow" , вместе с классом анимации:
<img class="animated wow zoomInUp" src="images/01.jpg" alt="">
Добавляем настройки для анимации если надо, при помощи специальных data-атрибутов :
<img class="animated wow zoomInUp" data-wow-offset="200" data-wow-delay="0.5s" data-wow-duration="2s" src="images/01.jpg" alt="">
В примере задано, что анимация должна срабатывать, когда картинка пройдет 200 пикселей от низа экрана. Но при этом у нее будет задержка в пол секунды, а сама анимация будет занимать по времени ровно 2 секунды.
Настройки WOW.js анимации через атрибуты
data-wow-duration – указываем время проигрывания анимации
data-wow-delay – ставим задержку перед проигрыванием анимации
data-wow-offset – включение анимации, когда элемент проходит определнное количество пикселей от низа экрана
data-wow-iteration – количество повторов анимации
Эти атрибуты не обязательные. Если вы их не укажете, анимация будет просто проигрываться по умолчанию, как только элемент появится на экране при прокрутке окна браузера.
По материалам статьи
Как добавит анимацию в WordPress можно узнать здесь:
