Swift.js是一个jQuery滚动动画插件，当用户向下滚动网页时，它会对背景和元素中的幻灯片应用微妙的视差效果。

如何使用它:

1.加载Swift jQuery插件的文件。

<!-- jQuery Library -->
<script src="/path/to/cdn/jquery.min.js"></script>
 
<!-- Swift Plugin -->
<link rel="stylesheet" href="/path/to/css/swift.css" />
<script src="/path/to/js/swift.js"></script>

2.将视差滚动效果应用于背景图像。

<div id="header">
  ...
</div>
 
<div id="footer">
  ...
</div>

#header, #footer {
  background: url(bg.jpg);
  height: 400px;
}

$('#header').swift({
  'type': 'bg', 
  'positionStart': '-200', 
  'length': '200'
});
 
$('#footer').swift({
  'type': 'bg', 
  'positionStart': '-500', 
  'length': '200'
});

3.在向下滚动时，将可配置的幻灯片应用于任何DOM元素。请注意，每个DOM元素都必须相对定位。

$('.myElement').swift({
  'type': 'dom', 
  'axis': 'left', 
  'positionStart': 'left', 
  'positionEnd': '50', 
  'length': '100', 
  'delay': '50', 
  'links': 'after'
});

4.所有默认选项。

$('.myElement').swift({
 
  // or 'bg'
  type: "dom",
 
  // %' : 100vh
  // '%%' : 200vh
  // or an integer
  duration: "%",
 
  //  left | right | top | bottom | {integer value}
  positionStart: "1"
 
  // position after the animation
  positionEnd: "0",
 
  // opacity before/after the animation
  opacityStart: "1",
  opacityEnd: "1",
 
  // %' : 100vh
  // '%%' : 200vh
  // or an integer
  delay: "auto",
 
  // length of the animation
  length: 0,
 
  // or 'left'
  axis: 'top',
 
  // after | both | before
  // if you want to set more than one animation on the same element, you must add this parameter;
  //  says if there is another animation "after", "before", or "both before and after"
  links: undefined,
 
});

预览截图

视差和滚动幻灯片效果 Swift.js