Как вызвать анимацию css как при прокрутке вниз, так и вверх

Я использую несколько анимаций CSS в проекте. Моя проблема в том, что эти анимации запускаются только один раз, при прокрутке вниз. Мне нужно, чтобы они запускались каждый раз, когда пользователь прокручивает их, будь то вверх или вниз по странице.

в CSS

.slideRight{

    animation-name: slideRight;
    -webkit-animation-name: slideRight; 

    animation-duration: 1.5s;   
    -webkit-animation-duration: 1.5s;

    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;     

    visibility: visible !important; 

}

@keyframes slideRight {

    0% {
        transform: translateX(-150%);
    }
    50%{
        transform: translateX(8%);
    }
    65%{
        transform: translateX(-4%);
    }
    80%{
        transform: translateX(4%);
    }
    95%{
        transform: translateX(-2%);
    }               
    100% {
        transform: translateX(0%);
    }   

}

@-webkit-keyframes slideRight {

    0% {
        -webkit-transform: translateX(-150%);
    }
    50%{
        -webkit-transform: translateX(8%);
    }
    65%{
        -webkit-transform: translateX(-4%);
    }
    80%{
        -webkit-transform: translateX(4%);
    }
    95%{
        -webkit-transform: translateX(-2%);
    }           
    100% {
        -webkit-transform: translateX(0%);
    }

}

HTML-код

<div class="animation-test element-to-hide" style="visibility:visible;">Something</div>

JavaScript

$(window).scroll(function() {

    $('.animation-test').each(function(){

        var imagePos = $(this).offset().top;

        var topOfWindow = $(window).scrollTop();

        if (imagePos < topOfWindow+400) {
            $(this).addClass("slideRight");
        }

    });

});

$('.element-to-hide').css('visibility', 'hidden');

JSFiddle

6
css html javascript jquery

1 ответов

что-то вроде этого должно работать.

Пример

$(window).scroll(function () {
    $('.animation-test').each(function () {
        var imagePos = $(this).offset().top;
        var imageHeight = $(this).height();
        var topOfWindow = $(window).scrollTop();

        if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) {
            $(this).addClass("slideRight");
        } else {
            $(this).removeClass("slideRight");
        }
    });
});

в основном это просто использование оператора if, чтобы найти, находится ли элемент в порту просмотра и добавление и удаление класса. Вы можете переключать видимость элемента с помощью:

.element-to-hide{
    visibility:hidden; 
} 
.slideRight {
    visibility: visible;
    animation-name: slideRight;
    -webkit-animation-name: slideRight;
    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out; 
}
10