只是另一个jQuery/JavaScript视差插件，用于使用CSS3 3D转换（translate3d）为图像、背景图像、Youtube/Vimeo/HTML5视频和任何HTML元素添加平滑的视差滚动效果。

回退到背景位置当不支持CSS转换时。

基本用法：

1.在HTML页面中加载jarallax插件。jQuery库是可选的。

<!-- jQuery (OPTIONAL) -->
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- Core -->
<script src="/path/to/dist/jarallax.js"></script>
<!-- Video Support -->
<script src="/path/to/dist/jarallax-video.js"></script>
<!-- Custom Element Support -->
<script src="/path/to/dist/jarallax-element.js"></script>

2.将视差图像添加到容器中，如下所示。

<!-- img tag -->
<div class="jarallax">
  <img class="jarallax-img" src="bg.jpg" alt="">
</div>
 
<!-- picture tag -->
<div class="jarallax">
  <picture class="jarallax-img">
    <source media="(max-width: 650px)" srcset="bg-alt.jpg">
    <img src="bg.jpg" alt="">
  </picture>
</div>
 
<!-- background image -->
<div class="jarallax" style="background-image: url('bg.jpg');">
</div>

3.背景图像所需的CSS样式。

.jarallax {
  position: relative;
  z-index: 0;
}
.jarallax > .jarallax-img {
  position: absolute;
  object-fit: cover;
  /* support for plugin https://github.com/bfred-it/object-fit-images */
  font-family: 'object-fit: cover;';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

4.初始化视差插件的最致命方法是将datajarallax属性添加到视差容器中。您可以通过数据OPTION属性传递配置选项，如下所示：

<div class="jarallax"
     data-jarallax
     data-OPTIONNAME="VALUE">
     <img class="jarallax-img" src="bg.jpg" alt="">
</div>

5.您也可以通过JavaScript初始化视差插件：

// Vanilla JavaScript
jarallax(document.querySelectorAll('.jarallax'), {
  // options here
});
 
// Or jQuery
$('.jarallax').jarallax({
  // options here
});

6.将视差滚动效果应用于视频：

<div class="jarallax" data-jarallax-video="https://www.youtube.com/watch?v=VIDEO ID HERE">
  Youtube Video
</div>
 
<div class="jarallax" data-jarallax-video="https://vimeo.com/VIDEO ID HERE">
  Vimeo
</div>
 
<div class="jarallax" data-jarallax-video="mp4:./1.mp4,webm:./1,ogv:./1.ogv">
  HTML5 Video
</div>

// Or Via JavaScript
jarallax(document.querySelectorAll('.jarallax'), {
  videoSrc: 'VIDEO SOURCE HERE'
});
 
// Or Via jQuery
$('.jarallax').jarallax({
  videoSrc: 'VIDEO SOURCE HERE'
});

7.将视差滚动效果应用于HTML元素：

<!-- Element will be parallaxed on -150 pixels from the screen center by Y axis -->
<div data-jarallax-element="-150">
  ...
</div>
 
<!-- Element will be parallaxed on 300 pixels from the screen center by Y axis and on -150 pixels from the screen center by X axis -->
<div data-jarallax-element="300 -150">
  ...
</div>

8.所有默认配置选项。

// scroll, scale, opacity, scale-opacity, scroll-opacity
type: 'scroll',
 
// animation speed
speed: 0.5, 
 
// image parallax scroll effect
imgSrc: null,
imgElement: '.jarallax-img',
imgSize: 'cover',
imgPosition: '50% 50%',
imgRepeat: 'no-repeat', 
 
// keep <img> tag in it's default place
keepImg: false, 
 
// use custom DOM / jQuery element to check if parallax block in viewport.
elementInViewport: null,
 
// z-index property
zIndex: -100,
 
// disable parallax scroll effect on certain devices
// e.g. disableParallax: /iPad|iPhone|iPod|Android/
disableParallax: false,
 
// disable video parallax scroll effect on certain devices
// e.g. disableParallax: /iPad|iPhone|iPod|Android/
disableVideo: false,
 
// use ResizeObserver API to recalculate position and size of parallax image
automaticResize: true, 
 
// video options
videoSrc: null,
videoStartTime: 0,
videoEndTime: 0,
videoVolume: 0,
videoLoop: true,
videoPlayOnlyVisible: true,
videoLazyLoading: true

9.回调函数。

jarallax(document.querySelectorAll('.jarallax'), {
  onScroll: function(calculations) {},
  onInit: function() {},
  onDestroy: function() {},
  onCoverImage: function() {},
  // video extension
  onVideoInsert: function() {//this.$video},
  onVideoWorkerInit: function(videoWorkerObject) {}, 
});

10.API方法。

// Vanilla JS
// jarallax(document.querySelectorAll('.jarallax'), method);
// jQuery
// $('.jarallax').jarallax(method);
 
// destroy
$('.jarallax').jarallax('destroy');
 
// check if is visible
$('.jarallax').jarallax('isVisible');
 
// fit image and clip parallax container
$('.jarallax').jarallax('onResize');
 
// calculate parallax image position
$('.jarallax').jarallax('scroll');

更新日志：

v2.0.4版本（2022-07-17）

• 删除将更改用途

v2.0.2版本（2022-02-17）

• 在视频扩展中全局添加了VideoWorker，因为一些项目使用了它
• 已添加浏览器列表配置nk
• 更新的esint和更漂亮的配置

v2.0.1版本（2022-02-11）

• 删除了IE支持（仅支持现代浏览器）
• 增加了ESM、UMD和CJS模块
• 向视频扩展添加了新的事件回调：onVideoInsert、onVideoWorkerUnit
• 添加了更漂亮的代码格式
• 删除了clipContainer方法，改用现代剪辑路径样式
• 删除了对带有供应商前缀的转换的检查

v1.12.8 (2021-10-21)

• 在dist中包括TS打字员
• 将移动设备的标准位置更改为“固定”（工作更顺畅）

v1.12.7 (2021-05-12)

• 已删除安装后脚本

v1.12.6 (2021-05-12)

• 为背景视频添加了辅助功能属性（tabindex、aria隐藏）

v1.12.5 (2020-11-29)

• 向Youtube和Vimeo API调用添加了GDPR符合性参数（在video-workers库中）
• 更新的依赖项

v1.12.4 (2020-09-23)

• 视频元素的附加样式（防止点击视频块）
• 修复了视频循环和图像重置问题

v1.12.3 (2020-09-22)

• 修复了Safari v14中剪辑图像的错误

v1.12.2 (2020-08-10)

• 更新的依赖项
• 更新的视频工作者脚本
• 略微更改的样式，应用于容器和视差图像

v1.12.1 (2020-04-29)

• 已弃用Jarallax的Elements扩展。改为使用laxx
• 增加了对视频错误事件的支持（错误时显示图像）
• 为自托管视频添加了海报属性
• 固定仅在禁用视差时播放视频背景
• 删除了对rafl的依赖。改为使用本机requestAnimationFrame

v1.12.0 (2019-10-23)

• 增加了对可滚动家长的支持
• 删除了调整大小观察员支持（应该在没有它的情况下工作）

v1.11.1 (2019-10-01)

• 修复了JS初始化中没有实际＜img＞标记的imgSrc选项

预览截图

jQuery和CSS3 高性能背景视差效应