05.02.2021, 17:47
|
|
Интересующийся
|
|
Регистрация: 02.10.2020
Сообщений: 20
|
|
|
Как сделать анимацию текста на слайдере slick?
Здравствуйте. Помогите пожалуйста разобраться.
Не получается настроить анимацию текста на слайдере
Слайдер slick, подключил animate.css
Хочу, чтобы при смене слайда текст на нем тоже анимировался
Вот код:
// слик-слайдер
$(document).ready(function () {
$('.slider-area__slider-img').slick({
dots: true,
arrows: false,
autoplay: true,
autoplaySpeed: 2500,
fade: true,
fadeSpeed: 1000,
})
});
// анимация текста
$('.slider-area__slider-img').on('changed.owl.carousel', function(event) {
$('.text-container__up-title').addClass('animate__fadeInRight');
setTimeout(function () { $('.text-container__up-title').addClass('animate__fadeInRight'); }, 0);
// ==
$('.text-container__title').addClass('animate__fadeInRight');
setTimeout(function () { $('.text-container__title').addClass('animate__fadeInRight'); }, 0);
// ==
$('.text-container__subtitle').addClass('animate__fadeInRight');
setTimeout(function () { $('.text-container__subtitle').addClass('animate__fadeInRight'); }, 0);
// ==
$('.text-container__btn').addClass('animate__fadeInRight');
setTimeout(function() { $('.text-container__btn').addClass('animate__fadeInRight'); }, 0);
})
<div class="slider-area__slider-img">
<div class="slider-area__slide-wrapper slide-wrapper"><img src="./src/img/sample-1.jpg" alt="1">
<div class="slide-wrapper__text-container text-container">
<h3 class="text-container__up-title animate__animated animate__delay-1s">New Arrivals</h3>
<h2 class="text-container__title animate__animated animate__delay-1s">Back To Reality Suit Set</h2>
<h2 class="text-container__subtitle animate__animated animate__delay-1s">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</h2>
<button class="text-container__btn animate__animated animate__delay-1s">SHOP NOW!</button>
</div>
</div>
//====================
<div class="slider-area__slide-wrapper slide-wrapper"><img src="./src/img/sample-1.jpg" alt="1">
<div class="slide-wrapper__text-container text-container">
<h3 class="text-container__up-title animate__animated animate__delay-1s">New Arrivals</h3>
<h2 class="text-container__title animate__animated animate__delay-1s">Back To Reality Suit Set</h2>
<h2 class="text-container__subtitle animate__animated animate__delay-1s">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</h2>
<button class="text-container__btn animate__animated animate__delay-1s">SHOP NOW!</button>
</div>
</div>
//================================
<div class="slider-area__slide-wrapper slide-wrapper"><img src="./src/img/sample-1.jpg" alt="1">
<div class="slide-wrapper__text-container text-container">
<h3 class="text-container__up-title animate__animated animate__delay-1s">New Arrivals</h3>
<h2 class="text-container__title animate__animated animate__delay-1s">Back To Reality Suit Set</h2>
<h2 class="text-container__subtitle animate__animated animate__delay-1s">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</h2>
<button class="text-container__btn animate__animated animate__delay-1s">SHOP NOW!</button>
</div>
</div>
</div>
Последний раз редактировалось Sergey-web92, 05.02.2021 в 18:14.
|
|
05.02.2021, 19:33
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,123
|
|
Sergey-web92,
медитируйте ...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<style type="text/css">
.slider{
width: 300px;
margin: auto;
position: relative;
}
.slick-dots {
display:flex;
justify-content: center;
align-items: center;
}
.slick-dots li button {
font-size: 20px;
margin-left: 40px;
cursor: pointer;
}
ul{
width: 100%;
height: 10px;
line-height:9px;
}
li{
float: left;
margin-left: 20px;
list-style: none;
}
h2.animate__animated,h3.animate__animated, button.text-container__btn {
visibility: hidden;
}
h2.animate__animated.animate__fadeInRight, h3.animate__animated.animate__fadeInRight,button.text-container__btn.animate__fadeInRight{
visibility: visible;
}
.text-container__title.animate__fadeInRight{
animation-delay: 300ms;
}
.text-container__subtitle.animate__fadeInRight{
animation-delay: 700ms;
}
.text-container__btn.animate__fadeInRight{
animation-delay: 1000ms;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
$(document).ready(function () {
$('.slider-area__slider-img').slick({
dots: true,
arrows: false,
autoplay: true,
autoplaySpeed: 3000,
fade: true,
fadeSpeed: 1000
})
$(".slider-area__slider-img").on("beforeChange", function(event, slick, currentSlide){
slick.$slides.find("h2, h3, .text-container__btn").removeClass("animate__fadeInRight")
});
$(".slider-area__slider-img").on("afterChange", function(event, slick, currentSlide){
slick.$slides.eq(currentSlide).find("h2, h3, .text-container__btn").addClass("animate__fadeInRight")
});
});
</script>
</head>
<body>
<div class="slider-area__slider-img">
<div class="slider-area__slide-wrapper slide-wrapper">1<img src="./src/img/sample-1.jpg" alt="1">
<div class="slide-wrapper__text-container text-container">
<h3 class="text-container__up-title animate__animated animate__fadeInRight">New Arrivals</h3>
<h2 class="text-container__title animate__animated animate__fadeInRight">Back To Reality Suit Set</h2>
<h2 class="text-container__subtitle animate__animated animate__fadeInRight">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</h2>
<button class="text-container__btn animate__animated animate__fadeInRight">SHOP NOW!</button>
</div>
</div>
//====================
<div class="slider-area__slide-wrapper slide-wrapper">2<img src="./src/img/sample-1.jpg" alt="1">
<div class="slide-wrapper__text-container text-container">
<h3 class="text-container__up-title animate__animated animate__fadeInRight">New Arrivals</h3>
<h2 class="text-container__title animate__animated animate__fadeInRight">Back To Reality Suit Set</h2>
<h2 class="text-container__subtitle animate__animated animate__fadeInRight">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</h2>
<button class="text-container__btn animate__animated animate__fadeInRight">SHOP NOW!</button>
</div>
</div>
//================================
<div class="slider-area__slide-wrapper slide-wrapper">3<img src="./src/img/sample-1.jpg" alt="1">
<div class="slide-wrapper__text-container text-container">
<h3 class="text-container__up-title animate__animated animate__fadeInRight">New Arrivals</h3>
<h2 class="text-container__title animate__animated animate__fadeInRight">Back To Reality Suit Set</h2>
<h2 class="text-container__subtitle animate__animated animate__fadeInRight">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</h2>
<button class="text-container__btn animate__animated animate__fadeInRight">SHOP NOW!</button>
</div>
</div>
</div>
</body>
</html>
|
|
06.02.2021, 09:47
|
|
Интересующийся
|
|
Регистрация: 02.10.2020
Сообщений: 20
|
|
Сообщение от рони
|
Sergey-web92,
медитируйте ...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<style type="text/css">
.slider{
width: 300px;
margin: auto;
position: relative;
}
.slick-dots {
display:flex;
justify-content: center;
align-items: center;
}
.slick-dots li button {
font-size: 20px;
margin-left: 40px;
cursor: pointer;
}
ul{
width: 100%;
height: 10px;
line-height:9px;
}
li{
float: left;
margin-left: 20px;
list-style: none;
}
h2.animate__animated,h3.animate__animated, button.text-container__btn {
visibility: hidden;
}
h2.animate__animated.animate__fadeInRight, h3.animate__animated.animate__fadeInRight,button.text-container__btn.animate__fadeInRight{
visibility: visible;
}
.text-container__title.animate__fadeInRight{
animation-delay: 300ms;
}
.text-container__subtitle.animate__fadeInRight{
animation-delay: 700ms;
}
.text-container__btn.animate__fadeInRight{
animation-delay: 1000ms;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
$(document).ready(function () {
$('.slider-area__slider-img').slick({
dots: true,
arrows: false,
autoplay: true,
autoplaySpeed: 3000,
fade: true,
fadeSpeed: 1000
})
$(".slider-area__slider-img").on("beforeChange", function(event, slick, currentSlide){
slick.$slides.find("h2, h3, .text-container__btn").removeClass("animate__fadeInRight")
});
$(".slider-area__slider-img").on("afterChange", function(event, slick, currentSlide){
slick.$slides.eq(currentSlide).find("h2, h3, .text-container__btn").addClass("animate__fadeInRight")
});
});
</script>
</head>
<body>
<div class="slider-area__slider-img">
<div class="slider-area__slide-wrapper slide-wrapper">1<img src="./src/img/sample-1.jpg" alt="1">
<div class="slide-wrapper__text-container text-container">
<h3 class="text-container__up-title animate__animated animate__fadeInRight">New Arrivals</h3>
<h2 class="text-container__title animate__animated animate__fadeInRight">Back To Reality Suit Set</h2>
<h2 class="text-container__subtitle animate__animated animate__fadeInRight">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</h2>
<button class="text-container__btn animate__animated animate__fadeInRight">SHOP NOW!</button>
</div>
</div>
//====================
<div class="slider-area__slide-wrapper slide-wrapper">2<img src="./src/img/sample-1.jpg" alt="1">
<div class="slide-wrapper__text-container text-container">
<h3 class="text-container__up-title animate__animated animate__fadeInRight">New Arrivals</h3>
<h2 class="text-container__title animate__animated animate__fadeInRight">Back To Reality Suit Set</h2>
<h2 class="text-container__subtitle animate__animated animate__fadeInRight">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</h2>
<button class="text-container__btn animate__animated animate__fadeInRight">SHOP NOW!</button>
</div>
</div>
//================================
<div class="slider-area__slide-wrapper slide-wrapper">3<img src="./src/img/sample-1.jpg" alt="1">
<div class="slide-wrapper__text-container text-container">
<h3 class="text-container__up-title animate__animated animate__fadeInRight">New Arrivals</h3>
<h2 class="text-container__title animate__animated animate__fadeInRight">Back To Reality Suit Set</h2>
<h2 class="text-container__subtitle animate__animated animate__fadeInRight">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</h2>
<button class="text-container__btn animate__animated animate__fadeInRight">SHOP NOW!</button>
</div>
</div>
</div>
</body>
</html>
|
Большое спасибо, Вы мне очень помогли
|
|
06.02.2021, 09:58
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,123
|
|
|
Sergey-web92,
не копируйте примеры целиком без надобности, можно цитировать.
|
|
|
|
