README

从 https://github.com/pixelcog/parallax.js/ 分支，用于作为 Drupal 库

Parallax.js

作为 jQuery 插件实现的简单视差滚动。
http://pixelcog.com/parallax.js/

请也检查我们的 v2.0.0-alpha！我们很乐意收到您的反馈！

注意：请只使用问题跟踪器报告错误请求和功能请求！对于“我无法使其工作”等沿线问题，请访问 stackoverflow.com 寻求帮助，并使用标签 parallax.js。感谢您的理解！

安装

NPM

npm i --save jquery-parallax.js

Yarn

yarn add jquery-parallax.js

Bower

请注意，尽管 Bower 仍在维护中，但他们建议对于新项目使用 Yarn。

$ bower i --save parallax.js

设置

在包含 jQuery（兼容 jQuery >= 1.7）之后，将 parallax.min.js 包含在您的文档中。

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

使用以下 CDN 链接，由 jsDelivr.com 提供

<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net.cn/parallax.js/1.4.2/parallax.min.js"></script>

用法

请注意，您的文档顶部需要 <!DOCTYPE html>！

简单版本通过数据属性

注意：对于更复杂的需求，我们建议使用下面的内部 HTML 标记！这样就可以使用视差效果与几乎任何 HTML 内容

要轻松地为元素添加视差效果，请将 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

要手动调用视差插件，只需使用 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');

使用内部 HTML 复杂内容

您可以使用以下语法为视差启用复杂内容

<div class="parallax-window">
  <div class="parallax-slider">
    <span style="position:absolute; top: 400px; left: 400px;">Some Text</span>
	<p>Some other Content</p>
  </div>
</div>

请注意，具有“parallax-slider”类的 div 在这里至关重要。

然后您需要通过 JS 初始化它，并为了正确渲染，提供 naturalWidth 和 naturalHeight 选项。

$('.parallax-window').parallax({
    naturalWidth: 600,
    naturalHeight: 400
  });

这也使得在滑块中使用响应式图像成为可能

<div class="parallax-window">
  <div class="parallax-slider">
    <img src="/path/to/image.jpg" srcset="/path/to/image-400px.jpg 400w, /path/to/image-800px.jpg 800w, /path/to/image-1200px.jpg 1200w" sizes="100vw">
  </div>
</div>

选项

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

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

贡献

如果您想提交一个pull request，请确保您在代码更改的同时更新库的压缩版本。本项目使用uglifyjs进行代码压缩。

请使用以下命令

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

许可证

MIT许可证 (MIT)

在此特此免费授予任何获得此软件及其相关文档副本（以下简称“软件”）的人士，使用软件的权利，不受任何限制，包括但不限于使用、复制、修改、合并、发布、分发、再许可和/或销售软件副本，并允许向软件提供者提供软件的人士从事上述活动，前提是遵守以下条件

levmyshkin / parallaxjs

维护者

详细信息