Rotate js using CSS translate3d and transition
- No dependencies
- Works in all major browsers that support CSS translate3d or transition (IE9+)
- Works on tablet PC
Best jQuery Animation Plugins & Tutorials with Demo
Snabbt.js : Fast Animations with javascript and CSS transforms
Snabbt.js is a minimalistic javascript animation library. It focuses on moving things around. It will translate, rotate, scale, skew and resize your elements. By including matrix multiplication operations, transforms can be combined in any way you want. The end result is then set via CSS3 transform matrices.
snabbt.js is built to be fast. It will only animate things that modern browsers can animate cheaply: transforms and opacity. The goal is to make a library that will let the user make smooth animations without needing to know too much about browser rendering.
Magic Dust : HTML Particles with JavaScript
Magic Dust is pure html solution for particles based effects. The main benefits of our plugin is easy to use, high performance, responsive and lightweight of plugin. 2.9KB and you can add amazing effects to your html elements. Just few lines of code and magic will happen on your page.
Features:
- Pure JS, 2.9KB
- No jQuery, Vanilla or other libraries required
- Low CPU and RAM Usage
- Responsive support, works perfect with relative values like percents, em or rem
- High customability, 12 parameters
- Easy to use, just few lines of well documented code
- Working fine on mobile devices
Rotating Words using CSS3 Animations
In Modern Web Design, Typography plays a very important role in enhancing the looks of a website. For modular Web Design, selecting right effects is not an easy task. In today’s time, First Impression is the Last Impression. In this tutorial, we’ll create some different types of Animation Effects on rotating words in a sentence.
Fixed Navigation Transition with CSS3 & jQuery
Fixed headers are a must for long pages and menus that need to be seen all the time. The transition between an inline menu and a fixed menu is an added effect that really makes your navigation stand out. I have made two different transition effects: A flip effect and an arrow ribbon effect.
3D Card Previewer with CSS3 & jQuery
I’ve been working on a movie review based site and I wanted to try and create a movie previewer. I’m incorporating CSS3 transform’s perspective and rotation. The previewer consists of a list of 3D Card movie posters tilted to the right and one featured movie blown up full size. You can switch in between featured movies by clicking on each movie poster.
jQuery FancyIndex Plugin
Nowadays almost every “fresh” page looks the (s)hame: One page, very content, much scroll. So even though you really hate usability, enhance your design patters by using customer-orientated plugins like this. It was built using the jQuery library.
Features:
- Using the directory-function upgrades the user’s experience
- Customizable trough settings and CSS
- Highly compatible
- Highly customizable
- Uses CSS3 transitions by default
