jquery - Wordpress 中的视差滚动精灵

Question

我试图从这个粉碎教程中重新创建效果，（参见滚动精灵）但我完全被难住了。我已经在这几天了。

在粉碎版本中，悬停的精灵以与其父背景不同的速度滚动，创建分层/3D 效果。在我的版本中，精灵与其父背景以相同的速度滚动。

他们的版本在 Chrome 检查器中如下所示：

还有他们的 HTML：

我的版本：

还有我的 HTML：

请注意粉碎版本如何具有该内联样式/百分比，但不是我的？我终其一生都无法弄清楚。我没有收到任何错误，我玩弄了 jQuery 版本，我已经确认他们使用的所有脚本也在我的页面上加载。

我的版本在这里。

关于我可能错过的任何想法？

Answer 1

在 script.js 的第 25 行，它正在寻找带有 data-type="background" 的 section 标签

$('section[data-type="background"]').each(function(){

您使用的是文章标签而不是部分标签，因此它不起作用。您可以像教程那样构建您的 html，也可以像以下那样更改脚本。

$('article[data-type="background"]').each(function(){

或者像这样获取任何带有 data-type="background" 的标签

$('[data-type="background"]').each(function(){

如果您确实更改了脚本而不是像教程那样构建它，您可能会遇到其他可能必须解决的问题。