5 Examples of Great Animations created using CSS3 and JavaScript
August 25, 2010 | by Panda | 1 Comment | CSS3, javascript
We have handpicked our top 20 examples of great created using CSS3 and JavaScript. Some of these demos contain source files too so that you may play with them later on.
NOTE: CSS3 animations require a WebKit engine based which means you can only view them on Google Chrome or Apple Safari. Although some of them work on Firefox , most don’t.
1. Image Gallery based on CSS3 Transitions
You won’t believe it but this image gallery has been designed using CSS and JQuery calls. CSS3 transitions have been used to create the event listeners. Chrome & Safari are fully supported but it also works fine on Firefox.
2. Elastic Thumbnail Menu
This will work great for any online display website or website that has thumbnails spread over their pages. CSS has been used to animate the thumbnails so that when you hover over them, they are enlarged to make them prominent and also give an overall cool look. Definitely recommended for websites.
3. iTunes Like Slider in CSS
This icon tray runs really smooth in both Chrome and Safari and resembles the much acclaimed iTunes Icons Slider. You can move the icons right and left with the slider or with left and right keys. JQuery UI is used to give it the sleek look.
4. Fixed Motion Animated Image Gallery
This is yet another Image Gallery created using pure CSS (not even JS). Images are jumbled up with their captions at the bottom right of the images. The hover over effect has been added so that the images rotate and align themselves when the cursor moves over one of the images.
5. Dynamically Expanding and Movable Image Gallery
Yet another CSS based Image gallery but a lot different from the ones in the above examples. You can completely move around in the gallery with arrow keys. The gallery slides smoothly when moved and the images also are expanded upon hovering over them. Another proof-of-concept of what CSS3 could achieve.
Thank you..really informative!!