Question

我正在尝试在html body标记上使用Parallax.js。

https://pixelcog.github.io/parallax.js/
https://github.com/pixelcog/parallax.js/

我将jQuery，Parallax的路径和数据参数添加到正文中，但它没有显示。

我已尝试将js放在页首和页脚中。我哪里错了？

<body data-parallax="scroll" data-image-src="http://i.imgur.com/yXmsCmA.jpg">
  <ul>
    <li>parallax</li>
    <li>parallax</li>
    <li>parallax</li>
    <li>parallax</li>
    <li>parallax</li>
  </ul>
</body>

向body添加一个类并使用jQuery手动调用也没有效果。

$('.parallax-window').parallax({imageSrc: 'http://i.imgur.com/yXmsCmA.jpg'});

这里也是一个cdnjs文件：

<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.4.2/parallax.min.js"></script>

Answer 1

显然，您的错误与不加载资源或语法错误无关，但是没有阅读文档并尝试以不是为其设计的方式使用它：

来自Under The Hood：

parallax.js将在文档主体的开头为每个视差图像创建一个固定位置元素。此镜像元素将位于其他元素后面，并匹配其目标对象的位置和尺寸。

这基本上意味着你不能视差<body>，因为它被用作效果的容器。（它会尝试创建<body>的镜像并将其设置为<body>的子项。这有意义吗？）。

只需将其全部放在容器中，仅用于parallax.js

附加说明：根据Matt的评论，parallax.js目前需要jQuery 2.2.4或更低版本才能正常使用。

HTML body标签上的Parallax.js

1 个答案: