20 jQuery Plugins to Create Animating Image Effects. jQuery can be very powerful and as you learn more about it you will be amazed what it is capable of doing.
Today’s post is a collection of 20 jQuery plugins to create animating image effects on your site/blog. They could be very helpful to attract new visitors to stay on your page and reduce bounce rate or just for fun! Enjoy. 1. Photon : JS CSS 3D Lighting Engine Photon is a experimental JavaScript CSS 3D Lighting Engine. SourceDemo 2. Allows you to create numerous transition animation effects for webpage elements. SourceDemo 3. forkit.js : An animated GitHub ribbon An experimental animated ribbon which reveals a curtain of additional content.
SourceDemo 4. Shiny Sparkle Progress bars with percentage label. Source + Demo 5. A handy JavaScript plugin for generating and animating nice & clean gauges. Source + Demo 6.: JZoopraxiscope A jQuery plugin for making animations from static images inspired in Eadweard Muybridge’s Zoopraxiscope. SourceDemo. jAni – jQuery Plugin for Cartoon-like Background Image Animation (alternative to animated GIF) — ajaxBlender.com. Framework: jQuery Listed in: Effects jAni is a simple plugin for jQuery which allows you animate background images.
The plugin is basically an alternative to the animated GIF but with several benefits. At first, it’s always better to use an animated GIF as this format is supported by all browsers without any JavaScript code or additional markup, but the “dark side” of it is that an animated GIF allows only 256 colors and you cannot control animation in any way. The jAni loads a long vertical image and changes its background position with the speed you setup, giving you more control of the animation. Light-weight scriptEasy to integrateFully customizable via CSSWorks with all modern browsers 1.)
{code type=html} <script type=”text/javascript” src=”.. 3.) 4.) {code type=html} <div id=”animation-1″></div> {/code} 5.) That’s it ;) Click the Demo button to see it in action. jani.play() Start playing animation. Building an Animated Cartoon Robot with jQuery. Why?
Aside from being a fun exercise, what purpose does something like this have? None that's plainly obvious. Its about as useful as a miniature ship in a bottle. Yet it does have an underlying purpose. It could inspire someone to look beyond the perceived constraints of web designers and developers. View Demo Overview This project was created by layering several empty divs over each other with transparent PNGs as background images. The backgrounds were animated at different speeds using a jQuery plug-in by Alexander Farkas. The robot is comprised similarly to the background animation scene by layering several DIVs together to create the different robot pieces. The Markup <div id="wrapper"><div id="cloud-01"><div id="cloud-02"><div id="mountains-03"><div id="ground"><div id="full-robot"><div id="branding"><h1>Robot Head.
The structure of the divs closely resembles our diagram. The Style The CSS for this project is just as simple as the markup. The jQuery JavaScript Note from Chris Share On.