0

Код для анимации с использованием gsap есть следующий код

$('polygon').each(function() {
            var minY = -600;
            var maxY = 0;
            var minX = -600;
            var maxX = 600;

            var randomY = Math.floor(Math.random() * (maxY - minY + 1)) + minY;
            var randomX = Math.floor(Math.random() * (maxX - minX + 1)) + minX;


            var tl = new TimelineLite();
            tl
            .set(this, {
                transformOrigin: "50% 50%",
                position: "absolute",
                x: randomX,
                y: randomY,
                rotation: randomX,
                scale: 1
            })
            .to(this, 3, {
                x: 0,
                y: 0,
                rotation: 0,
                scale: 1
            }, 0.5);

        });

Анимация делаеться в слайдере Bootstrap 4. Анимация работает только на первом слайде. Как запускать ету анимацию при каждом изменении слайда

1 ответ 1

0

Для этого в Bootstrap Carousel есть событие, которое срабатывает, когда слайд "сменился":

 $('.carousel').on('slid.bs.carousel', function(){
   var $slide = $(this) // текущий слайд

   /* здесь можно запустить анимацию */
   /* например обратиться к элементам "внутри" слайда */
   $('polygon', $slide).each(function(){
     /* ваш код */
   })

   /* или просто сделать что-нибудь */
   console.log('slide changed')
 })    

Стоит учитывать скорость анимации и скорость смены слайдов, чтобы всё получилось правильно.

Если вы инициализируете сarousel через data-атрибуты, то нужно учесть ожидание загрузки окна или поместить код в конец страницы:

(function(){
   $(function(){
     $('.carousel').on(...) 
   })
 })()

Если используете инициализацию через JavaScript:

(function(){
  $('.carousel')
    .carousel({/* параметры */})
    .on('slid.bs.carousel', function(){
       /* обработка события */
    })
})()

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.