Javascript 背景图像视差滚动教程

在花了几天的时间试图弄明白为什么我在一个网站上的一张图片上无法实现视差滚动后，我终于在这里发布了。到目前为止，我有以下代码：

HTML:

我几乎已经尝试了所有的教程来获得一个简单的视差滚动效果，但它们似乎不适合我目前的情况。对我来说最有希望的是使用插件-我尝试将以下内容添加到我的div标签中：

<div id="intro" class="intro"
        data-bottom="opacity:1;background-position: 0px -50px;"
        data-center="opacity:1;background-position: 0px 0px;"
        data-top="opacity:1;background-position: 0px 50px;">

然后，我在html的末尾初始化了skrollr：

<script type="text/javascript" src="js/skrollr.js"></script>
<script>
    window.onload = function() {
        skrollr.init();            
    }
</script>

window.onload=函数（）{
skrollr.init（）；
}

---

…不起作用。我对这方面还不太熟悉，所以非常感谢您的帮助

我认为你主要部门的

id

应该等于

skrollr body

，而不是

intro

第一次编辑

实际上，我看到在某些情况下，主

id

不需要命名为

scroller body

。也许可以帮助你实现不同的效果，因为我找不到任何官方文件

请检查问题片段的结尾

第二版

我将您的html代码更改为

<section id="skrollr-body">
    <div class="intro"
        data-bottom="opacity:1;background-position: 0px -50px;"
        data-center="opacity:1;background-position: 0px 0px;"
        data-top="opacity:1;background-position: 0px 50px;">
        <h1>Content in here</h1>
        <p>first big text block</p>
        <p>second huge text block</p>
    </div> 
</section>

---

但你可以自由地尝试价值观。检查工作状态

您知道您在

id=intro

的末尾缺少一个关闭

？你能证明什么“不起作用”吗？试试看。也许我的javascript有问题？这里有一些东西可以在fiddle中使用，但当我在本地@DThomasI尝试该教程时，它似乎对我不起作用：（.我想我正在使用的javascript可能有问题，也许我没有正确使用skrollr.js？@eggrowers在[link]（jsbin.com）或[link]（jsfiddle.net）上发布你的代码）我会努力解决这个问题。这就是我目前所拥有的。我删除了一些我在主intro div标签中拥有的内容，因为它看起来不太相关。我链接了另一个js文件，但据我所知，其中一个只负责平滑地上下滚动页面（我把链接留在那里，以防它们有什么重要的意义）@hex494D49@eggrollers检查更新的答案。然后根据您的背景图像玩

背景属性

。

<script type="text/javascript" src="js/skrollr.js"></script>
<script>
    window.onload = function() {
        skrollr.init();            
    }
</script>

<section id="skrollr-body">
    <div class="intro"
        data-bottom="opacity:1;background-position: 0px -50px;"
        data-center="opacity:1;background-position: 0px 0px;"
        data-top="opacity:1;background-position: 0px 50px;">
        <h1>Content in here</h1>
        <p>first big text block</p>
        <p>second huge text block</p>
    </div> 
</section>

background: url('bg-image.jpg') no-repeat fixed center;