Share on facebook
Share on twitter

Animsition: User-Friendly jQuery-Plugin for Animated Page Transitions

JavaScript along with CSS3 make it easy to create website animations. Some use CSS3 animations to pimp page transitions within a website. The current Cascading Stylesheets version allows you to create simple fade-in and slide-in effects as well as 3D transitions to other pages. The fairly new jQuery plugin “Animsition” helps to easily integrate such animated page transitions into your web project. Incorporate Data, Mark up HTML, Start the Plugin Animsition can be quickly integrated and configured. It consists of a JavaScript and a Stylesheet file which are both incorporated into the HTML document. In addition, you’ll need to mark up a HTML container that will be faded in or out for the transitions. As you’ll usually want all content to be animated, the container should include everything within the body. It’s, however, possible to enclose only a part of the content. The navigation and logo, for example, usually won’t change, so there’s no need to animate them.

It’s important to give the container the “animsition” class, so that the plugin can access it and animate the element. It’s also necessary to give the “” elements the “animsition-link” class, so that you can call the site […]