Tutorials All - Webdesign, Graphic Design

Visit our new Webdesign Templates,css,html5 etc

Download New Android Applications

Visit our new Collections of Android Application

5.10.11

HTML5 Image Transitions Jquery Plugin



This is a jQuery plugin consisting of 4 canvas based image transitions. These transitions will work on all major browsers supporting the “canvas” element. This includes Chrome, Safari, mobile Safari (iphone/ipad), Firefox (4 and above) Opera and Microsoft Internet Explorer (9 and above).

For older browser like Microsoft Internet Explorer 7 and 8 (which lack canvas support), a fallback solution is provided in the form of a “fade in/out”, so your images will still transition even if lacking the visual part.

The plugin itself is just a single 5k js file with no additional styles required, usage is really simple and only minimal markup is needed to setup the transition:
// markup
<img data-destination="to.jpg" src="from.jpg" />


// code
$("img").peTransitionHilight();


This plugin takes advantage of latest browser features and is able to preload the images before the transition is started. It comes with default presets but can be highly customized by uding additional options on initialization.These are fully detailed in the included help documentation.