Parallax & Slide-in Effects On Scroll - Swift.js

Swift.js is a jQuery scroll animation plugin that applies a subtle parallax effect to backgrounds and slides in element when users scroll down the webpage.

How to use it:

1. Load the Swift jQuery plugin's files.

<!-- 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. Apply the parallax scrolling effect to background images.

<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. Apply a configurable slide-in effect to any DOM element while scrolling down. Note that each DOM element must be relatively positioned.

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

4. All default options.

$('.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,

});

---

This awesome jQuery plugin is developed by timotheemoulin. For more Advanced Usages, please check the demo page or visit the official website.