Question

我正在尝试将视差滚动添加到我的页面中，我不确定我做错了什么。这是如何设置它：

http://pixelcog.github.io/parallax.js/

我下载了库并将其放入我的文件中。然后我在页面上调用它以及jquery库。然后我为我的代码做了这个：

<div class="home-img">
     <img src="/images/try.jpg" alt="">
     <div class="parallax-window" data-parallax="scroll" data-image-src="/images/try.jpg">
          <div class="home-img-text">Quality Solutions</div>
     </div>
</div>
.home-img {
   /*position: absolute;
    max-width: 100%;*/
    margin: auto;
    width: 100%;
    height: auto;
    vertical-align: middle;
}
.home-img img {
    width: 100%;
    position: absolute;
}
.parallax-window {
    min-height: 400px;
    background: transparent;
}

这就是说明书对我的理解所说的。但是，我尝试删除我的基础img行<img src="/images/try.jpg" alt="">，当我这样做时，img就消失了。

有谁知道我做错了什么？

这可以在我的网站上看到，这里：

Click here

Answer 1

您忘了加载Parallax.js库，改为行：

<script src="/path/to/parallax.js"></script>

到

<script src="/parallax.js-1.3.1/parallax.js"></script>

现在脚本可以运行了。但是＆＃34; home-img＆＃34; div需要看起来像这样：

<div class="home-img">
 <div class="parallax-window" data-parallax="scroll" data-image-src="/images/try.jpg">
      <div class="home-img-text">Quality Solutions</div>
 </div>

通过这种方式，您将能够看到效果。如果你保留图像，它将高于效果。

修改我建议你使用浏览器检查工具。通过这种方式，您可以查看当前是否已加载所有javascript。

在您的情况下，检查工具中的控制台选项卡显示错误：

http://optimumwebdesigns.com/path/to/parallax.js Failed to load resource: the server responded with a status of 404 (Not Found)

对于chrome使用本教程： https://developer.chrome.com/devtools

对于firefox使用本教程： https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector

Parallax Scrolling的效果保持不变而不是移动

1 个答案: