( function ($){
jQuery (window).on ('load', function (){
/* Global - Auto run animation for elements with data-animationcss - engine.js */
animationCSS ();
});
/* Auto run animation for elements with data-animationcss */
function animationCSS(){
if ( !is_touch_device ()) {
jQuery ('*[data-animationcss]').addClass (" animated ");
/* ================ ANIMATED CONTENT ================ */
if (jQuery (".animated")[ 0 ]) {
jQuery ('.animated').css ('opacity', '0');
}
/* use scrollmagic */
var animator = new ScrollMagic.Controller ();
jQuery ('*[data-animationcss]').each (function (){
var animation = jQuery (this).attr ('data-animationcss');
var scene = new ScrollMagic.Scene ({
triggerElement: this,
triggerHook: 'onEnter',
offset: 50,
reverse: false
}).on ('start', function (element){
jQuery (this.triggerElement ()).css ('opacity', 1);
jQuery (this.triggerElement ()).addClass (" animated " + animation);
})
.addTo (animator);
});
}
}
} ) (jQuery);
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter