Custom animate.css modular
Custom animate module with animate.css and ie fallbacks using jQuery
HTML
This is a modular code snippet used with <a href="http://daneden.github.io/animate.css/">animate.css</a> to create a custom animation module.
<br/>the code also shows how to use it with <a href="http://www.woothemes.com/flexslider/">flexslider</a>.
<br/>However it can also be used with stand alone elements and any other type script you can customize
<br>
<br>This example does not work here because the scripts are not linked.
<br>
<br>Example of this code in use can be found at:
<br>
<a href="http://dev.crf.org/crf2.org/fellows/">http://dev.crf.org/crf2.org/fellows/</a>
<br>
<a href="http://www.nyechocourse.com/">http://www.nyechocourse.com/</a>
<br>
<a href="http://dev.crf.org/projects/holiday/2014/">http://dev.crf.org/projects/holiday/2014/</a>
JavaScript
//SUSAN DELGADO
//CUSTOM ANIMATION MODULAR CODE
var ANIMATIONS = (function (self) {
function __init() {
}
var _globals = {
}
function __animateEl(el, action) {
if (Modernizr.csstransitions) {
var el = el;
"use strict";
if (action === 'in') {
var i = 0;
var animaDelay = 0;
if (Modernizr.csstransitions) {
$(el).css('-webkit-animation-delay', animaDelay + 's');
$(el).css('-moz-animation-delay', animaDelay + 's');
$(el).css('-0-animation-delay', animaDelay + 's');
$(el).css('-ms-animation-delay', animaDelay + 's');
$(el).css('animation-delay-delay', animaDelay + 's');
$(el).show().addClass('animated').addClass($(el).attr('data-animation'));
} else {
var timing;
$(el).hide();
i = $(el).attr('data-count');
$(el).delay(300 * i).fadeIn('slow');
}
i++;
animaDelay = animaDelay + 0.2;
} else {
if (Modernizr.csstransitions) {
$(el).removeClass($(el).attr('data-animation')).removeClass('animated').hide();
} else {
$(this).hide();
}
}
}
}
function __animateMuli(parent, child, action) {
// alert(slide+index);
"use strict";
if (action === 'in') {
var i = 0;
var animaDelay = 0;
$(parent + ' ' + child).each(function () {
if (Modernizr.csstransitions) {
$(this).css('-webkit-animation-delay', animaDelay + 's');
...