Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.02.2021, 16:47
Интересующийся
Отправить личное сообщение для Sergey-web92 Посмотреть профиль Найти все сообщения от Sergey-web92
 
Регистрация: 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 в 17:14.
Ответить с цитированием
  #2 (permalink)  
Старый 05.02.2021, 18:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,104

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>
Ответить с цитированием
  #3 (permalink)  
Старый 06.02.2021, 08:47
Интересующийся
Отправить личное сообщение для Sergey-web92 Посмотреть профиль Найти все сообщения от Sergey-web92
 
Регистрация: 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>
Большое спасибо, Вы мне очень помогли
Ответить с цитированием
  #4 (permalink)  
Старый 06.02.2021, 08:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,104

Sergey-web92,
не копируйте примеры целиком без надобности, можно цитировать.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать что бы картинки с другого url отображались как свои zlodey Серверные языки и технологии 1 04.05.2015 21:30
Как сделать анимацию элемента? Dimaz jQuery 6 24.01.2013 20:51
Как сделать непрерывную и плавную анимацию с jQuery в backgroundPosition? Isaac jQuery 2 21.01.2013 12:23
Как сделать чтобы textarea тянулась в высоту при добавлении в нее текста? javasc Общие вопросы Javascript 4 27.03.2012 21:14
Как сделать анимацию циклично? Randomizer jQuery 4 23.09.2010 20:19