Ramjet.js morphs one DOM (Document Object Model) from one state to another with smooth animations and transitions. To be more specific, it makes it look like two elements are transforming from one to another without actually needing to manually animate it. You can even use it on images too.
Animation is a sure way to get people’s attention. There are several ways to create animation and by far the easiest is by using GIF. Animation done by GIF requires no coding at all but while the method is easy, it also results in typically huge file size and poor quality picture. There is a better way to do this using the CSS keyframes method. Today we feature an experiment by Joe Howard that shows you how to produce web animation using CSS keyframes.
Once in a while, someone came up with a mindblowing solution to an interface problem. How exactly do you design an overload of information to avoid from overwhelming your reader? Pete from onextrapixel has created Flip Out Cards – a jQuery plugin that lets you display more information by flipping out extra cards without consuming much space. In essence, the plugin gathers all the cards, group them together based on the direction defined (left, right, bottom, and top), position them correctly and hide them out of view. All animations are driven by CSS3, so you could also manipulate class names based on the flip sequence preferred.
My favourite is demo #5, where the card expands in all directions on mouseover. Cool stuff.
The web industry operates at a breakneck speed and so all front-end developers must continue to learn and keep up to date with the latest trends, methodologies, languages and techniques. In this compact yet excellent article by Joe Howard, you will find 5 useful skills you could master this year that will help you remain at the forefront of the latest web development know-how. Think SASS, Grunt, SVG, CSS animation and custom parallax.