Question

从标题下方向下滚动时，我也尝试将一个学生部分下调，该标题也有视频作为横幅，因此我需要使用滚动效果上的视差从该视频下方向下滚动该部分。< / p>

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

$(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轴上设置一个负数，它将上升。尝试删除{p}中的-

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

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

Answer 2

首先，在Parallex，您不需要使用JavaScript即可，因此可以消除脚本标记

根据您的评论，我认为您需要对4张卡中的每张图像进行视差处理，以便添加以下代码

<style>
.parallax {
        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 50%;
        width: 16rem;
        height: 16rem;
        object-fit: cover;
        object-position: 50% 10%;
    }
    .parallax1{
        /* The image used */
        background-image: url("img/img4.png"); // you can add your image here this is an example
    }
</style>

at HTML
 <h1 class="students-h1">Students</h1>
        <div class="wrap-students"> 
            <div class="students" data-rellax-speed="8">
                <div class="parallax1 parallax"></div> // this div is instead of the img tag
                <h2 class="students-name">Nick Harrison</h2>
                <p class="students-description">lorem ipsum</p>
            </div>
        </div>

我正在尝试在滚动上产生视差效果，但为了使项目向相反方向移动

2 个答案: