Skip to content

Provides fallback animations for non web-kit browsers in concert with transit.js

Notifications You must be signed in to change notification settings

bradboose/parachute

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

#Parachute

Parachute is a jQuery plugin allowing for the usage of CSS3 style transformations ('rotate', 'skew', 'scale', etc) in non webkit browsers, notably IE7 and IE8, where the transforms are not supported. It is meant to be used alongside of transit.js to allow for one common animation syntax to optimize jQuery style animations in all devices and browsers.

Parachute emulates the syntax for animations used by transit.js, which replaces jQuery's $(elem).animate{...}' with '$(elem).transition{...}'

By including both transit and parachute in your application, your animations/transforms will upgrade to CSS3 in webkit browsers (transit) and emulate transitions as best as possible for non webkit browsers (parachute).

Example:

Instead of....

$('.box').animate({ skewX: '30deg', x: '100px' })

use...

$('.box').transition({ skewX: '30deg', x: '100px' })

##This project contains the following:

  • dist/jquery.parachute.js
  • A test app demonstrating Parachute located under the source directory

##Requirements for parachute

  • JQuery
  • transform.js - rotate/skew calculations
  • add-easing.js
  • transit.js (optional, but recommended for cross-browser animations solution)

##Instructions

  • Add dist/jquery.parachute.min.js to your page
  • Add add-easing.js from /source/javascripts/lib
  • Add the js libraries transform.js and add-easing.js (see below to download latest versions)
  • Add transit for full browser capability coverage if desired

##Notes

Currently does not yet support rotateX/rotateY/rotate3d, chaining of animations and transformOrigin. All will be part of future enhancements.

Much credit due to Rico Sta Cruz (@rstacruz) as the test application page was borrowed from transit.js.

###The following files exist for demo purposes only:

  • The entire source folder

###Downloads for latest versions

About

Provides fallback animations for non web-kit browsers in concert with transit.js

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published