javascript - 固定 GSAP 容器内的视差效果

标签 javascript gsap scrolltrigger

我有一个 block 被固定并水平滚动。

在这个 block 中，我有一个宽度为3573px的向量。

当用户水平滚动时，我希望矢量 也与我的演示中的图像一起滚动。

已尝试将我的矢量移动到.horizo​​ntalScroller__scroll下，以便它沿着图像滚动，但这不起作用。

查看演示:

$(function() {

  let images = gsap.utils.toArray(".horizontalScroller__item");

  gsap.to(images, {
    xPercent: -100 * (images.length - 1),
    ease: "none",
    scrollTrigger: {
      trigger: ".horizontalScroller",
      pin: true,
      scrub: 1,
      end: "+=3600", // size of svg bg
      //end: () => "+=" + document.querySelector(".horizontalScroller__images").offsetWidth
    }
  });

});
.spacer {
  height: 100vh;
  background: lightblue;
}

.horizontalScroller {
  padding: 100px 0 60px 0;
  background-color: #5D209F;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
.horizontalScroller__intro {
  margin-bottom: 25px;
}
.horizontalScroller__scroll {
  height: 70%;
  position: relative;
  overflow: hidden;
}
.horizontalScroller__images {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
}
.horizontalScroller__item {
  width: 50vw;
  display: flex;
  justify-content: center;
  flex: 0 0 auto;
}
.horizontalScroller__image {
  -o-object-fit: fill;
  object-fit: fill;
  margin: 0 auto;
  width: 260px;
  height: 255px;
}
.horizontalScroller__pattern {
  position: absolute;
  top: -50%;
  width: 100%;
  height: 100%;
}
.horizontalScroller__pattern-inner {
  height: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="03616c6c77707771627343362d332d31" rel="noreferrer noopener nofollow">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>

<section class="spacer"></section>

<section class="horizontalScroller">

  <div class="container">
    <div class="row justify-content-center">
      <div class="col-12 col-md-8">
        <div class="horizontalScroller__intro text-center">
          <h2 class="horizontalScroller__header">Header</h2>
        </div>
      </div>
    </div>
  </div>

  <div class="horizontalScroller__scroll">
    <div class="horizontalScroller__images" id="horizontal-scroll">
      <div class="horizontalScroller__item">
        <div class="horizontalScroller__image" style="background-image:url('https://picsum.photos/200/300');"></div>
      </div>
      <div class="horizontalScroller__item">
        <div class="horizontalScroller__image" style="background-image:url('https://picsum.photos/200/300');"></div>
      </div>
      <div class="horizontalScroller__item">
        <div class="horizontalScroller__image" style="background-image:url('https://picsum.photos/200/300');"></div>
      </div>
      <div class="horizontalScroller__item">
        <div class="horizontalScroller__image" style="background-image:url('https://picsum.photos/200/300');"></div>
      </div>
    </div>

  </div>

  <div class="horizontalScroller__pattern">
    <div class="horizontalScroller__pattern-inner">
      <svg class="horizontalScroller__pattern-svg" xmlns="http://www.w3.org/2000/svg" width="3573.448" height="935.115" viewBox="0 0 3573.448 935.115">
        <g id="Journey_line" data-name="Journey line" transform="translate(58.751 66.918)">
          <path id="Path_111603" data-name="Path 111603" d="M-57.191,807.764c141.061,46.335,271.1-48.506,208.8-171.343-44.647-88.041-84.385,2.223-76.906,70.2,11.034,100.3,75.906,190.808,216.669,143.778C406.3,812,470.169,700.216,568.892,676.505c94.985-22.813,137.722,77.422,240.409,77.422,189.877,0,202.929-186.737,384.8-145.215,70.851,16.176,119.356,96.77,315.333,91.709,108.733-2.808,183.293-179.6,324.1-222.009,136.412-41.091,145.842,55.306,290.03,55.078,221.015-.348,232.464-251.918,446.846-265.314,144.5-9.029,229.247,90.469,364.966-54.532,26.116-27.9,52.772-44.257,77.079-53.559,38.931-14.9,81.644-13.148,119.848,3.795,52.233,23.165,142.179,57.218,225.578-44.538C3456.26-.7,3510.921-63.64,3510.921-63.64" fill="none" stroke="rgba(249,247,250,0.3)" stroke-miterlimit="10" stroke-width="10" />
          <path class="pulse" id="Path_111604" data-name="Path 111604" d="M1922.219,474.558a33.6,33.6,0,1,1-33.6-33.6,33.6,33.6,0,0,1,33.6,33.6" fill="#5d209f" />
          <path class="pulse" id="Path_111605" data-name="Path 111605" d="M1908.09,474.558a19.475,19.475,0,1,1-19.476-19.476,19.476,19.476,0,0,1,19.476,19.476" fill="#f6eb61" />
          <path class="pulse" id="Path_111606" data-name="Path 111606" d="M1056.355,649.037c0-19.115-15.045-34.611-33.6-34.611s-33.6,15.5-33.6,34.611,15.045,34.611,33.6,34.611,33.6-15.5,33.6-34.611" fill="#5d209f" />
          <path class="pulse" id="Path_111607" data-name="Path 111607" d="M1042.226,649.037c0-11.078-8.719-20.059-19.476-20.059s-19.475,8.981-19.475,20.059,8.719,20.059,19.475,20.059,19.476-8.981,19.476-20.059" fill="#f277c6" />
          <path class="pulse" id="Path_111610" data-name="Path 111610" d="M623.423,672.044c0-18.834-15.045-34.1-33.6-34.1s-33.6,15.268-33.6,34.1,15.045,34.1,33.6,34.1,33.6-15.268,33.6-34.1" fill="#5d209f" />
          <path class="pulse" id="Path_111611" data-name="Path 111611" d="M609.294,672.044a19.478,19.478,0,1,0-19.476,19.764,19.621,19.621,0,0,0,19.476-19.764" fill="#ff6d6a" />
          <path class="pulse" id="Path_111608" data-name="Path 111608" d="M2355.151,439.3a33.6,33.6,0,1,0-33.6,33.6,33.6,33.6,0,0,0,33.6-33.6" fill="#5d209f" />
          <path class="pulse" id="Path_111609" data-name="Path 111609" d="M2341.022,439.3a19.475,19.475,0,1,0-19.476,19.476,19.476,19.476,0,0,0,19.476-19.476" fill="#ff6d6a" />
        </g>
      </svg>

    </div>
  </div>

</section>

<section class="spacer"></section>

最佳答案

你在哪里

<div class="horizontalScroller__pattern">

向其添加horizo​​ntalScroller__SVG:

<div class="horizontalScroller__pattern horizontalScroller__SVG">

添加以下代码:

let svgBG = gsap.utils.toArray(".horizontalScroller__SVG");

gsap.to(svgBG, {
 xPercent: -100,
 ease: "none",
 scrollTrigger: {
  trigger: ".horizontalScroller",
  pin: true,
  scrub: 1,
  end: "+=7200",
  //end: () => "+=" + document.querySelector(".horizontalScroller__images").offsetWidth
}
});

您需要摆弄 +7200 数字，直到获得所需的结果。

$(function() {

  let images = gsap.utils.toArray(".horizontalScroller__item");

  gsap.to(images, {
    xPercent: -100 * (images.length - 1),
    ease: "none",
    scrollTrigger: {
      trigger: ".horizontalScroller",
      pin: true,
      scrub: 1,
      end: "+=3600", // size of svg bg
      //end: () => "+=" + document.querySelector(".horizontalScroller__images").offsetWidth
    }
  });
  
  let svgBG = gsap.utils.toArray(".horizontalScroller__svg");

  gsap.to(svgBG, {
    xPercent: -100,
    ease: "none",
    scrollTrigger: {
      trigger: ".horizontalScroller",
      pin: true,
      scrub: 1,
      end: "+=7200",
      //end: () => "+=" + document.querySelector(".horizontalScroller__images").offsetWidth
    }
  });

});
.spacer {
  height: 100vh;
  background: lightblue;
}

.horizontalScroller {
  padding: 100px 0 60px 0;
  background-color: #5D209F;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
.horizontalScroller__intro {
  margin-bottom: 25px;
}
.horizontalScroller__scroll {
  height: 70%;
  position: relative;
  overflow: hidden;
}
.horizontalScroller__image_item {
      width: 50vw;
      display: flex;
      justify-content: center;
      flex: 0 0 auto;
 }
.horizontalScroller__images {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
}
.horizontalScroller__image {
  -o-object-fit: fill;
  object-fit: fill;
  margin: 0 auto;
  width: 260px;
  height: 255px;
}
.horizontalScroller__pattern {
  position: absolute;
  top: -50%;
  width: 100%;
  height: 100%;
}
.horizontalScroller__pattern-inner {
  height: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7e1c11110a0d0a0c1f0e3e4b504e504c" rel="noreferrer noopener nofollow">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>

<section class="spacer"></section>

<section class="horizontalScroller">

  <div class="container">
    <div class="row justify-content-center">
      <div class="col-12 col-md-8">
        <div class="horizontalScroller__intro text-center">
          <h2 class="horizontalScroller__header">Header</h2>
        </div>
      </div>
    </div>
  </div>

  <div class="horizontalScroller__scroll">
    <div class="horizontalScroller__images" id="horizontal-scroll">
      <div class="horizontalScroller__item horizontalScroller__image_item">
        <div class="horizontalScroller__image" style="background-image:url('https://picsum.photos/200/300');"></div>
      </div>
      <div class="horizontalScroller__item horizontalScroller__image_item">
        <div class="horizontalScroller__image" style="background-image:url('https://picsum.photos/200/300');"></div>
      </div>
      <div class="horizontalScroller__item horizontalScroller__image_item">
        <div class="horizontalScroller__image" style="background-image:url('https://picsum.photos/200/300');"></div>
      </div>
      <div class="horizontalScroller__item horizontalScroller__image_item">
        <div class="horizontalScroller__image" style="background-image:url('https://picsum.photos/200/300');"></div>
      </div>
    </div>

  </div>

  <div class="horizontalScroller__svg horizontalScroller__pattern">
    <div class="horizontalScroller__pattern-inner">
      <svg class="horizontalScroller__pattern-svg" xmlns="http://www.w3.org/2000/svg" width="3573.448" height="935.115" viewBox="0 0 3573.448 935.115">
        <g id="Journey_line" data-name="Journey line" transform="translate(58.751 66.918)">
          <path id="Path_111603" data-name="Path 111603" d="M-57.191,807.764c141.061,46.335,271.1-48.506,208.8-171.343-44.647-88.041-84.385,2.223-76.906,70.2,11.034,100.3,75.906,190.808,216.669,143.778C406.3,812,470.169,700.216,568.892,676.505c94.985-22.813,137.722,77.422,240.409,77.422,189.877,0,202.929-186.737,384.8-145.215,70.851,16.176,119.356,96.77,315.333,91.709,108.733-2.808,183.293-179.6,324.1-222.009,136.412-41.091,145.842,55.306,290.03,55.078,221.015-.348,232.464-251.918,446.846-265.314,144.5-9.029,229.247,90.469,364.966-54.532,26.116-27.9,52.772-44.257,77.079-53.559,38.931-14.9,81.644-13.148,119.848,3.795,52.233,23.165,142.179,57.218,225.578-44.538C3456.26-.7,3510.921-63.64,3510.921-63.64" fill="none" stroke="rgba(249,247,250,0.3)" stroke-miterlimit="10" stroke-width="10" />
          <path class="pulse" id="Path_111604" data-name="Path 111604" d="M1922.219,474.558a33.6,33.6,0,1,1-33.6-33.6,33.6,33.6,0,0,1,33.6,33.6" fill="#5d209f" />
          <path class="pulse" id="Path_111605" data-name="Path 111605" d="M1908.09,474.558a19.475,19.475,0,1,1-19.476-19.476,19.476,19.476,0,0,1,19.476,19.476" fill="#f6eb61" />
          <path class="pulse" id="Path_111606" data-name="Path 111606" d="M1056.355,649.037c0-19.115-15.045-34.611-33.6-34.611s-33.6,15.5-33.6,34.611,15.045,34.611,33.6,34.611,33.6-15.5,33.6-34.611" fill="#5d209f" />
          <path class="pulse" id="Path_111607" data-name="Path 111607" d="M1042.226,649.037c0-11.078-8.719-20.059-19.476-20.059s-19.475,8.981-19.475,20.059,8.719,20.059,19.475,20.059,19.476-8.981,19.476-20.059" fill="#f277c6" />
          <path class="pulse" id="Path_111610" data-name="Path 111610" d="M623.423,672.044c0-18.834-15.045-34.1-33.6-34.1s-33.6,15.268-33.6,34.1,15.045,34.1,33.6,34.1,33.6-15.268,33.6-34.1" fill="#5d209f" />
          <path class="pulse" id="Path_111611" data-name="Path 111611" d="M609.294,672.044a19.478,19.478,0,1,0-19.476,19.764,19.621,19.621,0,0,0,19.476-19.764" fill="#ff6d6a" />
          <path class="pulse" id="Path_111608" data-name="Path 111608" d="M2355.151,439.3a33.6,33.6,0,1,0-33.6,33.6,33.6,33.6,0,0,0,33.6-33.6" fill="#5d209f" />
          <path class="pulse" id="Path_111609" data-name="Path 111609" d="M2341.022,439.3a19.475,19.475,0,1,0-19.476,19.476,19.476,19.476,0,0,0,19.476-19.476" fill="#ff6d6a" />
        </g>
      </svg>

    </div>
  </div>

</section>

<section class="spacer"></section>

关于javascript - 固定 GSAP 容器内的视差效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/70806810/

上一篇：c++ - 当 std::uint16_t 在 union 明确定义的行为中处于事件状态时，是否正在访问 std::array<std::uint8_t, 2> ？

下一篇：python - 如何使用另一个文件的方法中的变量？

相关文章：

javascript - 选项卡处于非事件状态时倒数计时器 'delays'？

javascript - GSAP 3 ScrollTrigger 不能使用动态变化的值(不刷新/重新计算)

vue.js - Vue-Router 和 Gsap ScrollTrigger

javascript - 在 iPad iOS 11.4 上的 Mobile Safari 中滚动期间触摸事件仅触发 "once"

javascript - 使用每个 Firebase 条目一个条目填充容器

javascript - 在 React 中将字符串下载为 .txt 文件

node.js - 将 gsap Node 模块与 Meteor 一起使用

javascript - 如何在 Electron 中注册多个全局快捷方式？

javascript - oncomplete 调用后的无限循环函数 - 为什么？

javascript - GSAP:当进度条击中元素时固定进度条+进度条不准确

©2024 IT工具网  联系我们