使用纯CSS的视差滚动

我以前使用视差滚动，但只能使用插件。我遇到了插件的问题，并决定如何在纯CSS中做到这一点。使用纯CSS的视差滚动

但是我的东西我失去了一些明显的东西，因为它不工作。这是我的CodePen。我希望div能够“粘住”，下面的div可以向上滚动。但我这样做的方式是）。并没有真正达到这个效果，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; 
    }

来源

2015-11-13 Kay

[复制]有你搜索这个？第一个结果：http://stackoverflow.com/questions/20021846/parallax-scrolling-with-css-only – MMachinegun

是的，我做到了。那是我几天前开始的地方。但是我没有足够的把它翻译成我想要做的事。 – Kay

问题在于，固定背景无法在移动设备和打击垫上工作，永远不会。如果你需要这些设备的视差，你绝对需要JS。让我知道你是否想要一个例子。 –

-2

这是您需要的所有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

来源

2015-11-14 15:55:47

使用纯CSS的视差滚动

回答

相关问题