我已经尝试了超过10次使用parallax.js jquery插件。但它不工作。我不明白我是怎么回事。
插件站点：http://matthew.wagerfield.com/parallax/
我的演示工作站点：http://contact.themeshef.com/
有谁能告诉我如何使用视差js吗？提前感谢！
页面来源：
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#container {
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<div id="container">
<div id="scene">
<div class="layer" data-depth="0.00"><img src="layer1.png"></div>
<div class="layer" data-depth="0.20"><img src="layer2.png"></div>
<div class="layer" data-depth="0.40"><img src="layer3.png"></div>
<div class="layer" data-depth="0.60"><img src="layer4.png"></div>
<div class="layer" data-depth="0.80"><img src="layer5.png"></div>
<div class="layer" data-depth="1.00"><img src="layer6.png"></div>
</div>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script src="parallax.js"></script>
<script>
var scene = document.getElementById('scene');
var parallax = new Parallax(scene);
</script>
</body>
</html>
2条答案
按热度按时间rkttyhzu1#
您正在使用库的非编译版本。您应该编译并使用，或者您可以从here下载parallax.min.js文件的编译版本，或者您可以使用cdn。
在本例中，我使用CDN
368yc8dk2#
仅适用于Laravel
在创建Parallax类的新示例之前添加下面一行。
1.从"parallax-js"中导入视差;
1.窗口。视差=视差;
说明：
此代码从"parallax-js"模块导入默认导出，并将其分配给一个名为Parallax的变量。然后，它将Parallax的值分配给全局窗口对象的一个属性，该属性也名为Parallax。这允许全局访问Parallax变量以及与其关联的任何函数或属性，这在多个脚本需要与同一个Parallax示例或配置交互的情况下非常有用。
parallax-js "模块是一个JavaScript库，它提供了一种在网页上创建视差效果的简单方法，当用户滚动时，背景图像的移动速度与前景内容的移动速度不同。该库提供了一个面向对象的接口，用于创建视差示例并定义它们的行为，它可以与任何HTML元素或图像一起使用。
总的来说，这段代码很可能用于需要使用Parallax库的Web开发项目中，它使库的功能可用于同一页面上的其他脚本。