javascript - HTML正文标签上的Parallax.js

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

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

我添加了jQuery，Parallax的路径以及主体的数据参数，但未显示。

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

https://jsfiddle.net/kyttft92/

<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>

最佳答案

显然，您的错误与不加载资源或语法错误无关，但与未阅读文档并尝试以不适合其的方式使用它无关：

从Under The Hood：

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

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

只需将所有内容放置在容器中，即可使用parallax.js

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

关于javascript - HTML正文标签上的Parallax.js，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42885986/