I'm trying to make parallax effect on scroll but for the items to move the opposite way

Question

I'm trying to have a students section coming down when scrolling down from underneath my header which has a video as a banner as well, so I need that section to scroll down from underneath that video using parallax on scroll effect.

This is what I've tried already but it just moves up when I scroll down like other parallax effects :

 $(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

if you set a negative number to the Y axis, it will go up. Try removing the - in

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

Or setting a greater value than the actual. I see that students have -50% , try setting only greater values eg -30% else it will keep going up.

Answer 2

firstly at Parallex, you don't need javascript to do it, so you can eliminate the script tag

from your comment, I think you need to make the parallax at each image in the 4 cards so you can add the following code

<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>