Как сделать анимацию при прокрутке owl carousel слайда, по началу не зная о событиях я пробовал проверять на наличие класса active у слайда, но почему-то не работает.
$(document).ready(function(){
$("#header-text-slider").removeClass("slider-text-anim");
if ( $(".owl-item").hasClass("active") ) {
$("#header-text-slider").addClass("slider-text-anim");
alert("У элемента задан класс");
}
else {
$("#header-text-slider").removeClass("slider-text-anim");
alert("У элемента не задан класс");
}
});
Сам код айтема слайдера:
<div class="slider-img-header" style="background-image: url(img/slider/3.jpg);">
<div class="slider-mask-header">
<div id="header-text-slider" class="header-text displ-flex flex-items-center flex-justify-center full-screen-height min-height-600">
<div class="text-align-center">
<h1 class="white h1-header">The best atmosphere</h1>
<h3 class="h3-header header-text-about padding-tb-45 white margin-center">Atmosphere that was created by the best designers</h3>
<div class="margin-tb-15">
<a href="#" class="button-header">Boock a table</a>
</div>
</div>
</div>
</div>
</div>
Ну и СSS код класса который я добавляю:
.slider-text-anim {
animation-name: slider-text-anim;
animation-duration: .5s;
animation-timing-function: linear;
}
@keyframes slider-text-anim
{
from
{
-webkit-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
to
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
Помогите разобраться в чём проблема, самими событиями слайдера я пользоваться не умею(js знаю поверхностно, до этого времени не было в потребности больших знаний).
Анимировать нужно сам текст, а не слайд, вот у меня есть 3 вида текста, и каждому тексту я хочу давать отдельную анимацию.
Простой
