Question

我之前使用过视差滚动，但只使用了插件。我遇到了插件的问题，并决定弄清楚如何在纯CSS中完成它。

然而，我错过了一些显而易见的东西，因为它不起作用。这是我的CodePen。我希望div“坚持”并且下面的div向上滚动它。但我这样做的方式a）。并没有真正实现这种效果和b）。导致顶部的div以与后面的div完全不同的速度移动。

#port00{
    background-color: #394E72;
    width: 100%;
    height: 450px;


    -webkit-transform: translateZ(90px) scale(.7);
    transform: translateZ(-32px) scale(33);
    z-index: 1;

}   
#port01{
    background-color: #6BA5A5;
    width: 100%;
    height: 450px;
    margin-top: calc(450px * 16);

    -webkit-transform: translateZ(90px) scale(.7);
    transform: translateZ(-16px) scale(17);
    z-index: 2;
    }
#port02{
    background-color: #333;
    width: 100%;
    height: 450px;
    margin-top: calc(450px * 8);


    -webkit-transform: translateZ(0);
    transform: translateZ(-8px) scale(9);
    z-index: 3;
    }
#port03{
    background-color: #394E72;
    width: 100%;
    height: 450px;
    margin-top: calc(450px * 4);

    -webkit-transform: translateZ(-300px) scale(2);
    transform: translateZ(-4px) scale(5);
    z-index: 4;
    }
#port04{
    background-color: #6BA5A5;
    width: 100%;
    height: 450px;
    margin-top: calc(450px * 2);

    -webkit-transform: translateZ(-600px) scale(3);
    transform: translateZ(-2px) scale(3);
    z-index: 5;
    }
#port05{
    background-color: #333;
    width: 100%;
    height: 450px;
    margin-top: calc(450px * 1);

    -webkit-transform: translateZ(-600px) scale(3);
    transform: translateZ(-1px) scale(2);
    z-index: 6;
    }
#port06{
    width: 100%;
    height: 450px;
    background-color: #394E72;

    -webkit-transform: translateZ(0);
    transform: translateZ(-0px) scale(1);
    z-index: 7;
    }

Answer 1

这就是你需要的所有jQuery。

$(window).scroll(function(e){
parallax();
});
function parallax(){
var scrolled = $(window).scrollTop();
$('.bg').css('top',-(scrolled*0.1)+'px');
$('.bg2').css('top',-(scrolled*0.2)+'px');
}

http://codepen.io/damianocel/pen/yYKyaN

使用纯CSS进行视差滚动

1 个答案: