JSFiddle - React, Tailwind, and code Playground

by Pavel Volyntsev

HTML

<div class="wrapper">
    <div class="frame-1">1
    </div>
    <div class="frame-2">2
    </div>
    <div class="frame-3">3
    </div>
</div>

CSS

html, body {
    background: orange;
}
.wrapper {
    position: relative;
    height: 962px;
    background: blue;
}
.frame-1 {
    top: 0px;
    background:#c5d8c5;
    width:100%;
    height: 962px;
    transition: all 3s ease;
    position: absolute;
}
.frame-2 {
    width:100%;
    top: 962px;
    background:#99ff99;
    height: 962px;
    position: absolute;
    transition: all 3s ease;
}
.frame-3 {
    width:100%;
    top: 1924px;
    background:#ff0000;
    height: 962px;
    position: absolute;
    transition: all 3s ease;
}

JavaScript

var $element1 = $('.frame-1'),
    $element2 = $('.frame-2'),
    $element3 = $('.frame-3');

$(window).on('scroll', function () {
    var top = $(this).scrollTop();
    if (top = 1) {
        $element1.css("top", "-962px");
        $element2.css("top", "0px");
        $element3.css("top", "962px");
    } else if (top >= 963) {
        $element1.css("top", "-1924px");
        $element2.css("top", "-962px");
        $element3.css("top", "0px");
    } else {
        $element1.css("top", "0px");
        $element2.css("top", "962px");
        $element3.css("top", "1924px");
    }
});