javascript - 视差滚动图像超出视野

标签 javascript jquery html css

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

底部黑色部分应该有一张巨大的美元钞票,上面写着“Abe is the money”

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

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

干杯

最佳答案

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

查看this Fiddle ,当我将美元钞票图像的大小增加到 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;
}

所以可能发生的情况是图像的高度小于滚动位置的差异。尝试更大(更高)的图像。

关于javascript - 视差滚动图像超出视野,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19774761/

相关文章:

javascript - 如何在 MomentJS 中将日期转换为 UNIX 时间戳?

javascript - 使用 Dropzone 和 individual 输入字段进行多次上传

javascript - 选择更改,插入函数(如参数)或指令之间的区别

html - 如何将 div 标签保持在背景图像的中心并且应该是响应式的

javascript - CPU 密集型和 I/O 密集型有什么区别?

javascript - 下划线多维排序

Javascript 本地与全局

javascript - 通过 onclick 函数从表格中获取第一列文本

html - 如何在 bootstrap 中放置一个容器(两行)和两个容器(在不同的两行)?

javascript - 无法定义响应式 div 的宽度