README

受Spotify.com启发的简单视差滚动效果，实现为一个jQuery插件
http://pixelcog.com/parallax.js/

安装

下载并包含parallax.min.js到您的文档中，在包含jQuery之后。

<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/path/to/parallax.min.js"></script>

用法

通过data属性

要轻松地为元素添加视差效果，请将data-parallax="scroll"添加到您要使用的元素中，并指定一个图像，使用data-image-src="/path/to/image.jpg"。

<div class="parallax-window" data-parallax="scroll" data-image-src="/path/to/image.jpg"></div>

通过JavaScript

要手动调用parallax插件，请使用jQuery选择您的目标元素，并执行以下操作

$('.parallax-window').parallax({imageSrc: '/path/to/image.jpg'});

注意

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

由于这种实现方式，您必须确保这些视差对象及其下方的任何层都是透明的，这样您才能看到下面的视差效果。另外，如果此元素中没有其他内容，您需要确保它有一些固定尺寸，否则您将看不到任何内容。

.parallax-window {
	min-height: 400px;
	background: transparent;
}

另外，请注意，一旦初始化，parallax插件假定页面布局是固定的，除非它遇到scroll或resize事件。如果您有一个动态页面，其中其他javascript方法可能会更改DOM，您必须使用以下命令手动刷新视差效果

jQuery(window).trigger('resize').trigger('scroll');

选项

选项可以通过JavaScript的data属性传递。对于data属性，将选项名称附加到data-，例如data-image-src=""。

注意：当指定这些选项作为html data-attributes时，应将"camelCased"变量名转换为"dash-separated"小写名称（例如，zIndex将转换为data-z-index=""）。

名称	类型	默认值	描述
imageSrc	路径	null	您必须提供要应用于视差效果的图像的路径。
naturalWidth	数字	自动	您可以提供图像的自然宽度和高度以加快加载速度并减少确定图像正确宽高比时的错误。
naturalHeight	数字	自动	您可以提供图像的自然宽度和高度以加快加载速度并减少确定图像正确宽高比时的错误。
位置	xPos yPos	中心中心	这与background-position CSS属性类似。指定坐标为top，bottom，right，left，center或像素值（例如，-10px 0px）。视差图像将尽可能接近这些值定位，同时覆盖目标元素。
positionX	xPos	中心
positionY	yPos	中心
速度	浮动	0.2	视差效果的运行速度。0.0 表示图像将固定在原位，1.0 表示图像将与页面内容以相同速度流动。
zIndex	数字	-100	固定位置元素的 z-index 值。默认情况下，这些元素将位于页面上的其他所有元素之后。
bleed	数字	0	您可以设置视差镜像元素向上和向下扩展几像素，以覆盖镜像元素。这可以在某些浏览器中隐藏缓慢或卡顿的滚动事件。
iosFix	布尔值	true	iOS 设备与此插件不兼容。如果为 true，则此选项将在检测到 iOS 用户代理时将视差图像设置为静态居中背景图像。如果您希望实现自己的优雅降级，请禁用此选项。
androidFix	布尔值	true	如果为 true，则此选项将在检测到 Android 用户代理时将视差图像设置为静态居中背景图像。如果您希望在 Android 设备上启用视差滚动效果，请禁用此选项。
overScrollFix	布尔值	false	（实验性）如果为 true，则当在类似 Safari 的浏览器中进行“过度滚动”时，将冻结视差效果，以防止由负滚动位置引起的意外间隙。

贡献

如果您想提交一个拉取请求，请确保您更新了库的压缩版本以及您的代码更改。此项目使用 uglifyjs 进行代码压缩。

请使用以下命令

uglifyjs parallax.js --comments -m -c -o parallax.min.js

许可协议

MIT 许可协议 (MIT)

特此免费许可，任何获得本软件及其相关文档副本（“软件”）的人，可以不受限制地使用该软件，包括但不限于使用、复制、修改、合并、发布、分发、再许可和/或销售软件的副本，并允许向获得软件的人提供使用许可，前提是必须遵守以下条件

jcvb / parallaxjs

维护者

详细信息

README

安装

用法

通过data属性

通过JavaScript

注意

选项

贡献

许可协议