我正在嘗試在滾動上產生視差效果，但為了使項目向相反方向移動

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%否則它會不斷增加。

Answer 2

首先在Parallex，您不需要使用javascript，因此可以消除script標簽

從您的評論中，我認為您需要對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>