Swift Parallax

Swift is the new revolutionary Parallax framework.

Simple to use and to configure, it can move everything for you.


  • Backgrounds
  • |
  • Texts
  • |
  • Images
  • |
  • Cats
  • |
  • ...

Based on jQuery

  • Lightweight Footprint
  • Cross-Browser
  • CSS3 Compliant

Easy to Use

  1. Write your HTML
  2. Add the Swift transitions
  3. Go drink a coffee

Powerful

  • Vertical & horizontal transitions
  • Control start, length & speed of transition
  • Initial position
  • Backgrounds & DOM elements

Installation

Using Swift Parallax is pretty simple. You can download the jQuery Plugin from Github. and put them in your own directories. Then add the following lines in your HTML.

                            
                            

                            
                            
                            

                            
                            
                        

Docs

To add a transition on any DOM element, add the following classes and properties.

Classes

  • swift : basic class (must be present on every element
  • dom : means that you want to move the entire element (and all it's children)
  • bg : means that you want to move it's background only

Properties

  • type : can be set to dom (move the DOM element) or bg (move its background)
  • selector : defines jQuery selector. Can be either a class or an id
  • axis : defines the axis on which the element will move. Can be se to top (vertical) or left (horizontal)
  • initial position : defines the position of the element before the transition
  • final position : defines the position of the element at the end of the transition
  • length : defines the length of the transition
  • delay : defines the delay before begining the transition
  • links : can be set to after, both, or before to define if there is another transition for the same element after, before and after, or before this one
                            $('#slide_footer').swift({'type': 'bg', 'positionStart': '-500', 'length': '200'});
                        

This example for a background transition will :

  1. Place the background of '#slide_footer' 500px over its normal position for a vertical transition
  2. Begin the transition automatically
  3. After scrolling 200 pixels down, the background will be at its final position

Demos

Here are some concrete examples.

Timeline

Live