视差滚动's的效果是呆在原地而不是移动

Parallax Scrolling's effect staying in place instead of moving

本文关键字：原地 移动 滚动 视差      更新时间：2023-09-26

我正试图在我的页面上添加视差滚动，但我不确定自己做错了什么。以下是设置方法：

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就消失了。

有人知道我做错了什么吗？

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

点击此处

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

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

至

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

现在脚本可以工作了。但是"home-img"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

相关文章：