css代码：

.parallax{height:100vh;overflow-x:hidden;overflow-y:auto;-webkit-perspective:1px;perspective:1px;}
.parallax__group{position:relative;height:100vh;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;}
.parallax__layer{position:absolute;top:0;left: 0;right:0;bottom:0;}
.parallax__layer--fore{-webkit-transform:translateZ(-1px) scale(2);transform:translateZ(-1px) scale(2);z-index:5;}
.parallax__layer--base{-webkit-transform:translateZ(0);transform:translateZ(0);z-index:4;}
.parallax__layer--back{-webkit-transform:translateZ(-1px) scale(2);transform:translateZ(-1px) scale(2);z-index:3;}
.parallax__layer--deep{-webkit-transform:translateZ(-2px) scale(3.1);transform:translateZ(-2px) scale(3.1);z-index:2;}
.title{text-align:center;position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}
.demo__info{position:absolute;z-index:100;bottom:1vh;top:auto;font-size:80%;text-align:center;width:100%;}
#group1{z-index:5;}
#group3{z-index:4;}
#group2{z-index:3;}
#group4{z-index:2;}
#group1 .parallax__layer--base{background:#6c6;}
#group2 .parallax__layer--back{background:#7bd266;}
#group3 .parallax__layer--base{background:#99d865;}
#group4 .parallax__layer--deep{background:#b8df65;}

/* Debug-3d视图 */
.debug{position:fixed;top:0;left:.5em;z-index:999;background:rgba(0,0,0,.85);color:#fff;border-radius:0 0 5px 5px;padding:.5em;}
.debug-on .parallax__group{-webkit-transform:translate3d(800px,0,-800px) rotateY(30deg);transform:translate3d(700px,0,-800px) rotateY(30deg);}
.debug-on .parallax__layer{box-shadow:0 0 0 2px #000;opacity:0.9;}

html代码：

<div class="parallax">
    <div id="group1" class="parallax__group">
        <div class="parallax__layer parallax__layer--base">
            <div class="title">Base Layer</div>
        </div>
    </div>
    <div id="group2" class="parallax__group">
        <div class="parallax__layer parallax__layer--base">
            <div class="title">Base Layer</div>
        </div>
        <div class="parallax__layer parallax__layer--back">
            <div class="title">Background Layer</div>
        </div>
    </div>
    <div id="group3" class="parallax__group">
        <div class="parallax__layer parallax__layer--fore">
            <div class="title">Foreground Layer</div>
        </div>
        <div class="parallax__layer parallax__layer--base">
            <div class="title">Base Layer</div>
        </div>
    </div>
    <div id="group4" class="parallax__group">
        <div class="parallax__layer parallax__layer--base">
            <div class="title">Base Layer</div>
        </div>
        <div class="parallax__layer parallax__layer--back">
            <div class="title">Background Layer</div>
        </div>
        <div class="parallax__layer parallax__layer--deep">
            <div class="title">Deep Background Layer</div>
        </div>
    </div>
</div>

<!-- Debug-3d视图 -->
<div class="debug">
    <label><input type="checkbox">Debug</label>
</div>

js代码：

$(function(){
    var debugInput = document.querySelector("input");
    function updateDebugState() {
        document.body.classList.toggle('debug-on', debugInput.checked);
    }
    debugInput.addEventListener("click", updateDebugState);
    updateDebugState();
});

…………END…………

谢谢支持，喜欢就点个❤