Блог

Я пытаюсь сделать карусель, которая меняет слайды при прокрутке, каждый слайд содержит 4 слоя (фон , цветок и фигуру), что я хочу, чтобы при прокрутке карусель менялась на следующий слайд, но каждый слой должен скользить в разное время, точно так же, как в этой демонстрации

я создал карусель и ее работу над прокруткой, но я не знаю, как создавать эфферентные слои и анимировать их эффект слайда, как по ссылке выше.

мой код:-

     <div id="sec-4" class="section">
        <div class="carousel">
            <div>
              <div class="question">
                <div class="avatar">
                  <img width="150" height="150" src="https://i.pravatar.cc/300" class=" rounded-circle " alt=""> </div>
                <div class="message">1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore doloribus, </div>
              </div>
          
            </div>
            <div>
              <div class="question">
                <div class="avatar">
                  <img width="150" height="150" src="https://i.pravatar.cc/300" class="rounded-circle " alt=""> </div>
                <div class="message">2 Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore doloribus, </div>
              </div>
            
            
            </div>
            <div>
              <div class="question">
                <div class="avatar">
                  <img width="150" height="150" src="https://i.pravatar.cc/300" class=" rounded-circle " alt=""> </div>
                <div class="message">3 Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore doloribus, </div>
              </div>
            
            
            </div>
          </div>
    </div>


#sec-4{
    height: 100vh;
    font-size: 3rem;
    padding: 0%;
    display: flex;
    justify-content: center;
    align-content: center;
 
    
}
 #sec-4::before{
     content: "";
     position: absolute;
     width: 100%;
     height: 100vh;
     background-color: firebrick;
  
 }
 .rounded-circle{
     border-radius: 50%;
 }
.carousel{
    background-color: firebrick;
    height: 500px;
    width: 80%;
    
}
.message{
    width: 50%;
    position: relative;
    left: 30%;
    color: white;

}
.question{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 400px;
}



 
$(document).ready(function(){
  
  $('.carousel').slick({
     dots: true,
     slidesToShow: 1,
     slidesToScroll: 1,
     infinite: true,
     arrows: true,
     adaptiveHeight: true,
 });

 var $questionAvatar = $('.question .avatar');
 var $questionMessagge = $('.question .message');


 var tlQuestions = new TimelineMax({paused: true, delay: 0.4});

 TweenMax.set($questionAvatar, {autoAlpha: 0, scale: 0.6})
 TweenMax.set($questionMessagge, {autoAlpha: 0, scale: 0.6})

  tlQuestions
  .set($questionAvatar, {autoAlpha: 0, scale: 0.6})
  .set($questionMessagge, {autoAlpha: 0, scale: 0.6})
  .to($questionAvatar, 1, {autoAlpha: 1, scale: 1, ease: Back.easeOut.config(1)})
  .to($questionMessagge, 1, {autoAlpha: 1, scale: 1, ease: Back.easeOut.config(1), transformOrigin: 'bottom bottom'}, ' =0.1')

 tlQuestions.play();

 $('.carousel').on('afterChange', function(event, slick, currentSlide, nextSlide){
     // var currentSlide = $(slick.$slides.get(currentSlide));
   tlQuestions.play();
 });  

 $('.carousel').on('beforeChange', function(event, slick, currentSlide, nextSlide){
   tlQuestions.restart();
 });




$('.carousel').on('wheel', (function(e) {
e.preventDefault();
clearTimeout(scroll);
scroll = setTimeout(function(){scrollCount=0;}, 200);
if(scrollCount) return 0;
scrollCount=1;

if (e.originalEvent.deltaY < 0) {
 $(this).slick('slickPrev');
} else {
 $(this).slick('slickNext');
}
})); 
});
 

моя ручка:-
Кодовый набор

Я пытался использовать Swiper.js, Гладкий и все возможные ползунки. но главная проблема заключалась в том, что было 4 слоя, и верхний слой покрывал свайпер, поэтому он не будет работать, потому что он покрыт. Затем я решил эту проблему с помощью триггера прокрутки GSAP, который запускал моменты слоев при прокрутке мышью без необходимости использовать какой-либо плагин для карусели.