视差滚动图像超出视野

parallax scrolling image out of view

本文关键字:滚动 图像 视差      更新时间:2023-09-26

我正在做一个小小的课外项目来加强我的html5/css3/jquery知识,我正在使用视差滚动,但我似乎无法让底部图像滚动到视图中。它似乎卡在上面的后面,无论我做什么,我似乎都无法把它拉到视野中。

底部的黑色部分应该有一张巨大的美元钞票,上面写着"安倍是钱"

我的网址是:http://www.petegetscreative.com/abe/index.html

灵感来自本教程: http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/

干杯

我认为美元钞票图像太小了。

看着这个小提琴,当我将美元钞票图像的大小增加到 200% 时,它在预览中变得可见。

#known { 
    background: url(http://www.petegetscreative.com/abe/images/US-$5-SC-1953-Fr.1655.2.jpg) 50% 0 no-repeat fixed;
    background-color: #000;
    background-size: 200%;
    height: 600px;  
    margin: 0 auto; 
    width: 100%; 
    max-width: 1920px; 
    position: relative; 
    padding-top: 50px;
}

因此,可能发生的情况是图像的高度小于滚动位置的差异。尝试使用更大(更高)的图像。

我相信

问题可能是美元图像小于部分标签,并且您正在运行的脚本将 bg 图像置于负 Y 位置。您可以进行测试,使图像大于650px(部分的高度)。