个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我已经尝试使用 parallax.js jquery 插件超过 10 次。但这不起作用。我不明白我这是怎么了。
插件站点: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>
最佳答案
您正在使用库的非编译版本。您应该编译并使用，或者您可以从 here 下载 parallax.min.js 文件的编译版本或者您可以使用cdn .
在此示例中，我使用 CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/2.1.3/parallax.min.js"></script>
<!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>关于javascript - jquery parallax.js 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44403652/
25
4
0
http://pixelcog.github.io/parallax.js/ 世界，您好!我对上面的插件有问题。我已经设法制作了几个视差背景并且可以用内容填充它们没有问题但是在文档中它提到能够使用视差
当网页提供给 iPhone 时，如何在网页上的 javascript 中接收视差事件？我查看了 github.com 的 404 页面，它正在使用加速度计响应运动。只需尝试访问 github.com/
我需要帮助来创建一个 css 视差页面，就像 http://www.wideeyecreative.com 我希望视差采用这种格式: [固定div] [滚动 div] [滚动 div] [固定格] [
我目前正在开发一个视差插件，以帮助创建垂直滚动网站之一，其中某些元素会创建视差效果。 大多数插件使用巨大的 DIV 标签并滚动背景。就我而言，这是行不通的，因为客户希望动画角色 Sprite 和各种其
我正在尝试在实现框架中实现视差效果 http://materializecss.com/parallax.html在我的项目中。我已经能够初始化并实现它。 如何自定义背景图像和内容的速度。 这是我的代
我尝试使用回收器 View 编写我自己的视差效果。它目前工作得很好......直到我不改变我的设备方向。 在状态恢复时，我取回了我用来计算标题 Y 翻译的“指标”变量，这没问题。但是在恢复后我很难从不
请在 chrome 和 firefox 中查看下面给出的链接我正面临一些奇怪的问题 http://amaru-ventures.in/Headline_factory/ 第一期 滚动在 Firefox
您好，我正在使用以下库:http://pixelcog.github.io/parallax.js/我有一个问题。 我很喜欢我的形象，我希望它看起来像我 Image with problems 我的代
所以我尝试使用插件 parallax.js 创建空间效果和创建星星的两个独立的 Canvas 元素。我已经按照插件的 github 的指示设置了 HTML 和 JS，但是这两个 Canvas 元素都没
我正在尝试使用 parallax.js 将视差部分滚动组合在一起。我似乎无法让这些部分正常工作。我正在关注他们的教程 http://pixelcog.github.io/parallax.js/但由于
我有一个基本的视差网站 here ，但是当我尝试添加动态嵌入式 youtube 视频时出现错误。流体宽度视频解释 here 我试图保持我的视差功能，同时拥有流畅宽度的视频，但我在
我希望当鼠标点击英雄面板区域时，飞机和火箭仅从其原始位置移动约 5%。 当前代码使图像跟随和偏移鼠标位置。 请协助。 $(document).ready(function () { $('#h
我在一个网站上工作，我正在尝试使用 js 插件 scrollorama - http://johnpolacek.github.io/scrollorama/ 我已经在网站上很好地设置了插件，除了我的
当我向 div 添加背景图像时，下面的 div 会滚动经过该图像，从而产生很酷的视差效果。 但是，这仅在固定背景附件时有效。但是在固定位置，我无法让背景图像大小“覆盖”或“包含”div，而图像不会消失
我已经尝试使用 parallax.js jquery 插件超过 10 次。但这不起作用。我不明白我这是怎么了。 插件站点:http://matthew.wagerfield.com/parallax/
我已经使用 css 设置了视差效果:JS Fiddle 代码: body { margin: 0px; } header { height: 218px; background: blue
这是我的 html 文件: Html 这是我的 CSS 文件: CSS 问题是:如果我从 css 中的“body, html”中删除“html”在第 35 行，我的 scrollspy 导航栏正在工作
我在网站上使用 parallax.js，但遇到了一些问题。 似乎每次我想从右侧滚动一个 div 时，我正在滚动的 div 中的所有内容都非常向左对齐，并且 div 的内容都被压在左边 margin 。
是否可以在特定时间段/特定像素数内动态触发鼠标滚动？ 基本上我需要建立一个视差网站 - 但简报要求一个自动滚动的介绍动画自动滚动到页面中的某个点 - 我正在考虑为整个网站使用 Scrolldeck 以
我在这个方程上遇到了一些麻烦。 本质上，当光标位于边缘 200 像素范围内时，我希望画板(网格)div 将自身定位到浏览器的边缘。 这可以通过观察鼠标坐标来设置位置来轻松完成，但我希望它是流畅的。 I
我是一名优秀的程序员,十分优秀！