An ajax powered page transition, with a slide-in content animation triggered by a side tabbed navigation.
We’ve been experimenting lately with a CSS powered animation that replaces the refresh of the web page while the content is updated using ajax. Today’s nugget is based on the same idea, but with a different execution: this time a simple hover effect turns into a loading bar, that finally expands with new content!
A little playful interaction idea where we add some bounciness to a draggable element and animate it depending on its position.We wanted to create a playful dragging interaction that will morph and animate an element depending on its position. If dropped before the bounds we will snap the element back with an elastic effect. We also add some bounciness to inner elements so that everything gets an even more organic feel.
3D lines animation with three.js and put a fancy animated background color, adjusted some parameters like number of lines, perspective and colors.
Magic layout is a JQuery plugin by which you can animate all the elements on the page. There are 36 CSS3 animations that gives a huge advantage in performance. The plugin follow Responsive Web Design and it is fully adapted for mobile devices. Magic layout is simple to set up.
A template split in 2 animated blocks of content, inspired by dropbox.com/guide.
On bigger devices, the content is split in two main containers. When the user surfs through the content using the navigation, new content overlaps the old one. On smaller devices, we have a simple gallery of projects, with a slide-in panel containing additional project information.
Transitioning Buttons is a collection of flat buttons that morph into components. The examples show different types of components, i.e. fullscreen overlay, modal window and many more. The buttons are easy to integrate, customize and are fully responsive. The collection comes with six color themes including a quick setup guide.
A simple, Accessible, 60+fps, easy-to-use animated tabs plugin for jQuery.The plugin including the velocity.js library.
A responsive slider jQuery plugin with CSS animations.This plugin does not use jQuery animations. Only CSS3, because performance matters. No need to calculate distances, sizes or whatever, only add and remove classes to elements to animate them. It couldn’t be easier!
- Only 1 js file
- 1Kb minified
- Multiple effects (more than 60!)
- Works with html, images… whatever you want to animate
jQuery plugin that animates a full height screenshot (or any image) within a parent div to simulate a user scrolling the page.
All Animation.css is a set of animations, fun to let your sexiest project. They are cross-browser animations but that will emphasize your pages as sliders, 3D effects’s.