Today we made up my mind to develop something really interesting and useful for you. A new jQuery plugin – as a generator of books. The main idea is to display user friendly book basing on raw text (with images). The book consists of pages, each page consists of 2 sides (as in a usual book), there are buttons Back-Next at the sides of pages to navigate through the pages, and when we turn the pages we see that the pages are turned in 3D (powered by CSS3). In order to achieve this 3D effect we use CSS3 transform (rotate3d, preserve-3d and rotateY) and transition effects.
Best jQuery Animation Plugins & Tutorials with Demo
hoverFlow Plugin : A Solution to Animation Queue Buildup in jQuery
hoverFlow is a another Solution to Animation Queue Buildup in jQuery.Brandon Aaron published a quick tipon how to prevent animation queue buildup in hover animations. Since I was not satisfied with his solution, I tried to find another.After taking some wrong paths and learning a lot about jQuery’s animation (queue) system, I think I finally found a good solution.
The last locigal step was to wrap it up into a nice jQuery plugin – and so hoverFlow was born.
jsPlumb : Connect elements on the screen using jQuery, SVG, Canvas or VML
jsPlumb provides a means for a developer to visually connect elements on their web pages. It uses SVG or Canvas in modern browsers, and VML on IE 8 and jQuery.jsPlumb adds an element to the DOM for each Endpoint, Connector and Overlay. So for a connection having visible Endpoints at each end and a label in the middle, jsPlumb adds four elements to the DOM. The actual elements it adds depend on the renderer in use (Canvas/SVG/VML).
TextFX – A jQuery Text Animation Tool
TextFX is a jQuery text animation tool for animating a single line of text. It is built for easy usage, but also lends itself nicely to more advanced coders with it’s flexible script. TextFX uses jQuery version 1.7.1
Features:
- 15 Core Animations
- 18 Custom Settings
- Animate text in or out
- Animate Text Backwards
- Custom Easing
- Custom Speeds
- On start delay
- Set the offset x and y for your animations
- Hyperlink any animation
- onStart and onComplete callbacks with optional params
How to Make an Interactive Network Visualization with JavaScript
In this tutorial, we will focus on creating an interactive network visualization that will allow us to get details about the nodes in the network, rearrange the network into different layouts, and sort, filter, and search through our data.Learn how to make one using D3 and JavaScript. This visualization is a JavaScript based web application written using the powerful D3 visualization library. jQuery is also used for some DOM element manipulation. Both frameworks are included in the js/libs directory of the source code.
In this example, each node is a song. The nodes are sized based on popularity, and colored by artist. Links indicate two songs are similar to one another.
Try out the visualization on different songs to see how the different layouts and filters look with the different graphs.
Spritespin : jQuery Plugin for Sprite Animation
Spritespin is a jQuery plugin that enables sprite animation in your website.
It takes an array of images or a stiched sprite sheet and is able to play these images frame by frame. This results in an animation. The aim of this plugin is to provide a 360 degree view of some kind of product. There is no flash needed. Everything is done with javascript and the jQuery framework.
Features:
- Animation using spritesheets or image arrays
- Plenty of option parameters
- Api interaction
- Simple mouse interaction
- Custom behavior tweaking
- Support for touch devices
- Easy to integrate
- No flash
HoverTransitions – jQuery animated hover effects
HoverTransitions allows you to create numerous transition animation effects for webpage elements. The effects are performed by breaking the element into smaller boxes and animating the appearance of each of them according to different patterns and effects. The effects occur when events are performed. All animations are highly customisable.
