背景图像的视差滚动教程

Question

花了几天的时间弄清楚为什么我似乎无法使视差滚动在我正在工作的网站上为一张图片工作，然后终于在这里发布了。 所以到目前为止，我有这段代码：

HTML：

<div class="intro">
[a bunch of stuff here]
</div>

CSS：

.intro {
   background: url(../images/IMG_100.png) 50% 0 fixed; 
   background-position: center;
   margin: 0 auto; 
   width: 100%;
   box-shadow: 0 0 50px rgba(0,0,0,0.8);
   padding: 100px 0;
}

我已经尝试了所有教程来实现简单的视差滚动效果，但是就我的情况来看，它们似乎并不起作用。 对我而言，最有前途的是使用skrollr.js插件-我尝试在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>

...不起作用。 我对此还很陌生，因此任何帮助将不胜感激！

Answer 1

我认为您的主要div的id应该等于skrollr-body而不是intro 。

第一次编辑

实际上，我看到有些情况下不需要将主id命名为scrollr-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>

我也将.info类的background属性更改为此

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

但随时可以尝试价值观。 检查工作提琴