SOURCE

$(window).scroll(function(){
    // 返回被选元素的垂直滚动条位置  scroll 的最大滚动高度=dh-wh
    let scroll=$(window).scrollTop(); 
    // 整个文档的高度 (当前css设置的为4000)
    let dh=$(document).height();
    // 当前可见区域的大小
    let wh=$(window).height();
    value=(scroll/(dh-wh))*100
    $('#container').css('left',-value*3+'%')
})

<div id="container">
    <div class="section">
        <div class="content">
            <div class="text">
                <h1>Section One</h1>
                <p>Please send this message to those people who mean something to you,to those who have touched your life in one way or another,to those who make you smile when you really need it,to those that make you see the brighter side of things when you are really down</p>
            </div>
            <img src="https://preview.qiantucdn.com/58pic/36/43/87/49X58PIC7e96T7yh146AQ_PIC2018.jpg!qt324new_nowater" alt="">
        </div>
    </div>

    <div class="section">
        <div class="content">
            <div class="text">
                <h1>Section Two</h1>
                <p>Please send this message to those people who mean something to you,to those who have touched your life in one way or another,to those who make you smile when you really need it,to those that make you see the brighter side of things when you are really down</p>
            </div>
            <img src="https://preview.qiantucdn.com/58pic/36/31/42/02Q58PICVfAgE44fpzcCa_PIC2018.jpg!qt324new_nowater" alt="">
        </div>
    </div>

    <div class="section">
        <div class="content">
            <div class="text">
                <h1>Section Three</h1>
                <p>Please send this message to those people who mean something to you,to those who have touched your life in one way or another,to those who make you smile when you really need it,to those that make you see the brighter side of things when you are really down</p>
            </div>
            <img src="https://preview.qiantucdn.com/58pic/36/29/84/62358PIC99k58PICN0x358PICYpdJ_PIC2018.jpg!qt324new_nowater" alt="">
        </div>
    </div>

    <div class="section">
        <div class="content">
            <div class="text">
                <h1>Section Four</h1>
                <p>Please send this message to those people who mean something to you,to those who have touched your life in one way or another,to those who make you smile when you really need it,to those that make you see the brighter side of things when you are really down</p>
            </div>
            <img src="https://preview.qiantucdn.com/58pic/36/40/44/22d58PICrVFdb58PICXse9c45_PIC2018.jpg!qt324new_nowater" alt="">
        </div>
    </div>
</div>

body {
    margin: 0;
    padding: 0;
    /* 注意这里的高度设置是关键 */
    height: 4000px;
}

#container {
    position: fixed;
    top: 0;
    left: 0;
    width: 400%;
    height: 100vh;
    display: flex;
    background: #fff;
}

#container .section {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 50px 100px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
#container .section .content {
    display: flex;
    align-items: center;
    justify-content: center;
}
#container .section .content .text {
    padding-right: 50px;
}

#container .section .content .text h1 {
    margin: 0;
    padding: 0;
    font-size: 4em;
}

#container .section .content .text p {
    font-size: 1.1em;
}