Animation js (Alternative wow js)
function isScrolledIntoView(elem) {
let docViewTop = $(window).scrollTop();
let docViewBottom = docViewTop + $(window).height();
let elemTop = $(elem).offset().top;
let elemBottom = elemTop + $(elem).height();
return ((elemTop <= docViewBottom) && (elemBottom >= docViewTop));
}
$('.animate').each(function() {
if (isScrolledIntoView(this) === true) {
let animation = $(this).attr('data-animation');
let iteration = $(this).attr('data-iteration');
let duration = $(this).attr('data-duration');
let delay = $(this).attr('data-delay');
$(this).addClass('animated');
$(this).css({
'visibility': 'visible',
'animation-duration': duration,
'animation-name': animation,
'animation-delay': delay,
'animation-iteration-count': iteration,
});
}
});
$(window).scroll(function() {
$('.animate').each(function() {
if (isScrolledIntoView(this) === true) {
let animation = $(this).attr('data-animation');
let iteration = $(this).attr('data-iteration');
let duration = $(this).attr('data-duration');
let delay = $(this).attr('data-delay');
$(this).addClass('animated');
$(this).css({
'visibility': 'visible',
'animation-duration': duration,
'animation-name': animation,
'animation-delay': delay,
'animation-iteration-count': iteration,
});
}
});
});
Comments
Post a Comment