具有滚动魔术和动态子宽度的水平滚动

Question

我正在玩滚动魔法。 我想包括水平滚动。子元素必须能够具有不同的宽度。

我找不到任何适合我研究的东西。 有没有人为我实现过那个或可能的资源？

我不喜欢通过 Javascript 动态计算子元素的宽度。

Answer 1

首先您需要创建两个主 div horizontal-scroll-container 和 scroll-container ，然后包含子 div：

    <div class="horizontal-scroll-container"> <!-- Will be the fixed main container on animation start --> 
       <div class="horizontal-scroll"> <!-- Will be the scrolling container that include the childs  -->
          <div class="scroll-child 1"> <!-- Then the childs (You can set the width that you want) -->
          <div class="scroll-child 2">
          <div class="scroll-child 3">
       </div> 
    </div> 

为这些 div 设置样式：

    .horizontal-scroll-container {
      position:relative; //Will be fixed on animation start.
      width: 100%; //full width
      height: 100vh; //full height
      padding:3rem 0; //The padding you would like to use between the childs and father.
      background-color: rgba(191, 70, 169, 0.5); 
      overflow-x:hidden; //Because the childs will exceed the viewport width.
     }

   .horizontal-scroll  {
     position: absolute; 
     top: 0; 
     display: flex; 
     width: 250%; //The sum of the 3 container widths. 
     bottom: 0;
     margin: auto;
     height: 50%; //Try not to exceed viewport height.
    }

    .horizontal-scroll .scroll-child {
      width:100%; //or whatever width you want to set, make sure to set .horizontal-scroll width relative to the SUM of those child widths.
      margin:0;
      padding: 0;
      color:white;
      position: relative; 
    }

    .horizontal-scroll .scroll-child.2 { //changing the width of the child 2
      width:50%;
    }

之后，你需要使用GSAP TimeLineMax插件来实现这个例子。

    //Create new scrollmagic controller
    var controller = new ScrollMagic.Controller();

    //Create horizontal scroll slide gsap function
    var horizontalSlide = new TimelineMax()
      .to(".horizontal-scroll", 3,   {x: "-65%"}); //Depends on the final width you want to scroll.

    // Create scrollmagic scene to pin and link horzontal scroll animation
    new ScrollMagic.Scene({
        triggerElement: ".horizontal-scroll-container", //Div that will trigger the animation.
        triggerHook: "onLeave", //The animation will start on leaving the .horizontal-scroll-container section.
        duration: "200%" //Scroll Duration, the amount of pixels you want to scroll to see the entire animation. 
    })
    .setPin(".horizontal-scroll-container")
    .setTween(horizontalSlide)
    .addIndicators() // add indicators (requires scrollmagic indicators plugin)
    .addTo(controller);