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。也许this tutorial可以帮助你实现不同的效果，因为我找不到任何官方文档。

从问题中检查代码段的fiddle。

第二次编辑

我将您的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>

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

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

但随意尝试值。检查工作fiddle

背景图像的视差滚动教程

1 个答案: