javascript - 我正在尝试对滚动产生视差效果，但要使元素以相反的方式移动

Question

当从我的标题下方向下滚动时，我试图让学生部分向下滚动，其中也有一个视频作为横幅，所以我需要该部分使用视差滚动效果从该视频下方向下滚动。

这是我已经尝试过的方法，但当我像其他视差效果一样向下滚动时，它只会向上移动:

$(window).scroll(function() {
  var wScroll = $(this).scrollTop();

  $('.section__students').css({
    'transform': 'translateY(-' + wScroll / 9 + '%)'
  });
});

.students-main {
  width: 100%;
  height: auto;
  text-align: center;
}

.carousel {
  position: relative;
  margin: 0 auto;
}

.carousel__button {
  position: absolute;
  top: 45%;
  transform: translateY(-45%);
  background: transparent;
  border: 0;
}

.carousel__button:focus {
  outline: 0;
}

.carousel__button--left {
  left: 3.5rem;
  z-index: 1;
}

.carousel__button--right {
  right: 3.5rem;
}

.arrow-left-students {
  font-size: 3rem;
}

.arrow-left-students:hover {
  color: $color-primary;
}

.arrow-right-students {
  font-size: 3rem;
}

.arrow-right-students:hover {
  color: $color-primary;
}

.carousel__nav {
  display: flex;
  justify-content: center;
  padding: 3rem 0;
}

.carousel__indicator {
  border: 0;
  border-radius: 50%;
  width: 1.6rem;
  height: 1.6rem;
  background: $color-gray-dark-2;
  margin: 0 1.2rem;
}

.carousel__indicator:focus {
  outline: 0;
}

section .students-h1 {
  text-align: center;
  text-transform: uppercase;
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -140px);
}

.students-h1::after {
  content: '';
  width: 10rem;
  height: .8rem;
  background-color: $color-primary-light;
  position: absolute;
  bottom: -24rem;
  top: 70%;
  left: 50%;
  transform: translate(-50%, 30px);
  border-radius: 2rem;
}

.wrap-students {
  display: inline-block;
  justify-content: center;
  align-items: center;
  margin: 0 3rem;
  flex-direction: column;
  height: 30rem;
  width: 30rem;
  background-color: $color-grey-light-1;
  border-radius: 3rem;
}

.wrap-students:hover {
  box-shadow: -1px 3px 20px 3px $color-primary-light;
  transform: translateY(-10%);
  transition: all .5s;
}

.students {
  padding: 2.5rem 6rem;
}

.students .students-name {
  color: $color-gray-dark-2;
  padding-top: 1rem;
}

.students .students-description {
  margin-top: .5rem;
  font-style: italic;
  font-family: "lato", sans-serif;
  font-size: 1.6rem;
}

.wrap-students .students .students-img {
  border-radius: 50%;
  width: 16rem;
  height: 16rem;
  object-fit: cover;
  object-position: 50% 10%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="rellax section__students students-main" data-rellax-speed="7">
  <div class="carousel">
    <button class="carousel__button carousel__button--left">
      <i class="fas fa-chevron-left arrow-left-students"></i>
    </button>
    <h1 class="students-h1">Students</h1>
    <div class="wrap-students">
      <div class="students" data-rellax-speed="8">
        <img class="students-img" src="/img/student1.jpg" alt="student-image">
        <h2 class="students-name">Nick Harrison</h2>
        <p class="students-description">lorem ipsum</p>
      </div>
    </div>
    <div class="wrap-students">
      <div class="students">
        <img class="students-img" src="/img/student3.jpg" alt="student-image">
        <h2 class="students-name">Nick Harrison</h2>
        <p class="students-description">lorem ipsum</p>
      </div>
    </div>
    <div class="wrap-students">
      <div class="students" data-rellax-speed="8">
        <img class="students-img" src="/img/student1.jpg" alt="student-image">
        <h2 class="students-name">Nick Harrison</h2>
        <p class="students-description">lorem ipsum</p>
      </div>
    </div>
    <div class="wrap-students">
      <div class="students">
        <img class="students-img" src="/img/student3.jpg" alt="student-image">
        <h2 class="students-name">Nick Harrison</h2>
        <p class="students-description">lorem ipsum</p>
      </div>
    </div>
    <button class="carousel__button carousel__button--right">
     <i class="fas fa-chevron-right arrow-right-students"></i>
    </button>
    <div class="carousel__nav">
      <button class="carousel__indicator"></button>
      <button class="carousel__indicator"></button>
      <button class="carousel__indicator"></button>
    </div>
  </div>
</section>

Answer 1

如果您将 Y 轴设置为负数，它将上升。尝试删除 - 中的

    $('.section__students').css({
      'transform': 'translateY(' + wScroll / 9 + '%)'
    });

或设置比实际值更大的值。我看到学生有 -50%，请尝试仅设置更大的值，例如-30% 否则它将继续上升。