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

Popular posts from this blog

JavaScript code