实例 1：基础视差滚动（scroll 类型）
最基础的用法，背景图片以不同速度跟随滚动。
<!-- HTML 结构 -->
<div class="jarallax jarallax-height-400">
<img src="background.jpg" class="jarallax-img">
<div class="jarallax-content">内容</div>
</div>
// JS 初始化：
jarallax(document.querySelectorAll('.jarallax'));
视差滚动效果
背景图片以 50% 的速度跟随页面滚动
向下滚动查看更多效果
滚动页面，观察背景图片与内容的相对移动
实例 2：不同速度的视差效果
speed 参数越小，背景移动越慢，视差效果越明显。
// speed = 0.2（慢）- 视差效果最强
jarallax(document.querySelectorAll('.jarallax'), {
speed: 0.2
});
// speed = 0.7（快）- 视差效果较弱
jarallax(document.querySelectorAll('.jarallax-fast'), {
speed: 0.7
});
慢速视差 (speed: 0.2)
背景移动较慢，视差效果非常明显
快速视差 (speed: 0.7)
背景移动较快，视差效果较弱
实例 3：缩放视差效果（scale 类型）
图片随滚动进行缩放，营造视觉深度感。
// scale 类型：图片随滚动缩放
jarallax(document.querySelectorAll('.jarallax-scale'), {
type: 'scale',
speed: 0.5
});
缩放视差效果
图片随滚动放大/缩小，产生深度感
实例 4：透明度视差效果（opacity 类型）
图片进入视口时淡入，离开时淡出。
// opacity 类型：图片随滚动改变透明度
jarallax(document.querySelectorAll('.jarallax-opacity'), {
type: 'opacity'
});
透明度视差效果
图片进入视口时淡入，离开时淡出
实例 5：滚动+透明度视差（scroll-opacity 类型）
结合滚动视差和透明度变化，效果更加丰富。
// scroll-opacity：滚动 + 透明度组合
jarallax(document.querySelectorAll('.jarallax-scroll-opacity'), {
type: 'scroll-opacity',
speed: 0.4
});
滚动+透明度视差
背景移动的同时，透明度也会变化
实例 6：缩放+透明度视差（scale-opacity 类型）
图片缩放的同时改变透明度，营造优雅的过渡效果。
// scale-opacity：缩放 + 透明度组合
jarallax(document.querySelectorAll('.jarallax-scale-opacity'), {
type: 'scale-opacity',
speed: 0.5
});
缩放+透明度视差
图片缩放的同时，透明度也会变化
实例 7：小区块视差效果
视差效果不仅限于全屏区块，也可用于小型内容块。
<!-- 小型视差区块 -->
<div class="jarallax jarallax-small" data-jarallax='{"speed": 0.3}'>
<img src="small-bg.jpg" class="jarallax-img">
<div class="jarallax-content">
<h3>小标题</h3>
<p>简短描述</p>
</div>
</div>
段落内容示例
视差滚动是一种流行的网页设计技术，通过让背景元素以不同速度移动，创造出视觉深度感和沉浸感。
Jarallax 是一个轻量级的 JavaScript 库，可以轻松实现各种视差效果。
支持多种视差类型
scroll / scale / opacity / scroll-opacity / scale-opacity
通过调整 speed 参数，可以控制视差效果的强度。speed 值越小，背景移动越慢，视差效果越明显。
默认 speed 为 0.5，取值范围为 0 到 1。
实例 8：CSS 背景图片方式
除了 img 标签，也可以使用 CSS 背景图片实现视差效果。
<!-- 使用 data-jarallax-original-styles 保存原始样式 -->
<div class="jarallax"
data-jarallax='{"speed": 0.4}'
data-jarallax-original-styles="background-image: url('bg.jpg');">
<div class="jarallax-content">内容</div>
</div>
<!-- 或者使用内联样式 -->
<div class="jarallax"
data-jarallax='{"speed": 0.4}'
style="background-image: url('bg.jpg');">
<div class="jarallax-content">内容</div>
</div>
CSS 背景图片方式
使用 data-jarallax-original-styles 保存原始背景样式
实例 9：视频背景视差（YouTube）
支持 YouTube、Vimeo 和自托管视频作为视差背景。
<!-- 需要额外引入 jarallax-video.min.js -->
<script src="jarallax-video.min.js"></script>
<div class="jarallax jarallax-video-container">
<div class="jarallax-video" data-jarallax-video="https://www.youtube.com/watch?v=dQw4w9WgXcQ"></div>
<div class="jarallax-content">视频背景内容</div>
</div>
YouTube 视频背景
视频作为视差背景，支持自动播放和循环
实例 10：完整页面视差效果（综合示例）
结合多种视差类型和速度，打造丰富的视觉体验。
// 综合示例：同时初始化多个视差区块
jarallax(document.querySelectorAll('.jarallax'), {
speed: 0.5,
imgSize: 'cover',
imgPosition: 'center center',
imgRepeat: 'no-repeat'
});
综合视差效果
结合滚动和透明度，打造沉浸式体验
设计要点
- 选择合适的视差类型：scroll 适合深度感，scale 适合动态效果，opacity 适合过渡
- 控制速度：过小的 speed 值可能导致背景移动过快，建议在 0.3-0.7 之间
- 移动端优化：可以通过 disableParallax 在移动设备上禁用视差效果
- 性能考虑：使用 transform 而非 top/left 来实现动画，提升性能
开始使用 Jarallax
只需引入 CSS 和 JS，添加少量配置即可实现专业的视差效果