I have implemented a cool animation effect using JavaScript scroll from the following code: https://github.com/daneden/animate.css
In my JavaScript code, I am adding a class in the last line like this:
$(this).addClass('fadeInLeft');
While this is great, sometimes I wish to change the fadeInLeft effect to something else (like slideInleft or flipInLeft). How can I add different effects in that line for different divs?
This is my current JavaScript code:
$(document).ready(function() {
// Check if element is scrolled into view
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
// If element is scrolled into view, fade it in
$(window).scroll(function() {
$('.scroll-animations .animated').each(function() {
if (isScrolledIntoView(this) === true) {
$(this).addClass('fadeInLeft');
}
});
});
});