具有视差效果的幻灯片旋转木马滚动工作

如何解决具有视差效果的幻灯片旋转木马滚动工作

我正在尝试制作一个在滚动时更改幻灯片的轮播，每张幻灯片包含 4 层（背景、花朵和形状）我想要的是滚动轮播更改到下一张幻灯片，但每一层都应该在传出中滑动时间，就像这样demo

我已经创建了旋转木马及其在滚动上的工作，但我不知道如何像上面的链接一样制作传出层和动画它们的幻灯片效果。

我的代码：-

    <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,scale: 0.6})

  tlQuestions
  .set($questionAvatar,scale: 0.6})
  .set($questionMessagge,scale: 0.6})
  .to($questionAvatar,1,{autoAlpha: 1,scale: 1,ease: Back.eaSEOut.config(1)})
  .to($questionMessagge,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',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');
}
})); 
});

我的笔：- Codepen

解决方法

我尝试使用 Swiper.js、Slick 和所有可能的滑块。但主要问题是有 4 层，顶层覆盖了 Swiper，所以它不会工作，因为它被覆盖了。 然后我通过 GSAP scroll Trigger 解决了这个问题，我通过鼠标滚动触发了图层时刻，而无需使用任何轮播插件。