具有视差效果的幻灯片轮播滚动工作

Question

我正在尝试制作一个可以在滚动时更改幻灯片的旋转木马，每张幻灯片都包含 4 层（背景、花朵和形状）我想要的是在滚动时将旋转木马更改为下一张幻灯片，但每一层都应该滑动在传出时间，完全像这样 demo

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

我的代码：-

    <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');
}
})); 
});

我的笔：- Codepen

Answer 1

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

具有视差效果的幻灯片轮播滚动工作

slides carousel with parallex effect the work on scroll

html

javascript

css

jquery

slick.js