10 jQuery Plugins For Page Transition Effects With CSS3

Posted on Nov 3 2014 - 11:12am by Eric Tompkins

10 jQuery Plugins For Page Transition Effects With CSS3

10 jQuery Plugins For Page Transition Effects With CSS3

When creating a beautiful content filled website, there is no better tool to use than JQuery. You can easily add interactivity with simple JQuery plugins and add-ons. Here are  10 jQuery Plugins For Page Transition Effects With CSS3 that will get you started.

10 jQuery Plugins For Page Transition Effects With CSS3

1 – Animsition

Animsition is a jQuery plugin that makes it easy to add CSS animated page transitions. It offers 18 different animations, including various fades, rotations, flips, and zooms.

http://git.blivesta.com/animsition/

10 jQuery Plugins For Page Transition Effects With CSS3

2 – Medium-Style Page Transition

http://tympanus.net/Tutorials/MediumStylePageTransition/

An article on how to achieve Medium’s next page transition effect—an effect that can be seen by clicking anywhere on the “Read Next” footer at the bottom of the page. This effect is characterized by the lower article easing upward as the current article fades up and out.

10 jQuery Plugins For Page Transition Effects With CSS3

3 – Fullscreen Layout With Page Transitions

http://tympanus.net/Development/FullscreenLayoutPageTransitions/

A simple responsive layout with some fancy page transitions. The idea is to show four items initially and expand them. Some additional page transitions are added for inner items.

All effects are done with CSS transitions and controled by applying classes with JavaScript. The whole layout is flexible and some media queries are added to size down things for smaller screens.

10 jQuery Plugins For Page Transition Effects With CSS3

4 – smoothState.js

http://weblinc.github.io/jquery.smoothState.js/index.html

smoothState.js will unobtrusively enhance your website’s page loads to behave more like a single-page application framework. This allows you to add page transitions and create a nicer experince for your users.

 

10 jQuery Plugins For Page Transition Effects With CSS3

 

10 jQuery Plugins For Page Transition Effects With CSS3

5 – A Collection Of Page Transitions

http://tympanus.net/Development/PageTransitions/

A couple of animations that could be applied to “pages” for creating interesting navigation effects when revealing a new page. While some effects are very simplistic, i.e. a simple slide movement, others make use of perspective and 3d transforms to create some depth and dynamics.

10 jQuery Plugins For Page Transition Effects With CSS3

6 – ElementTransitions.js

http://dan-silver.github.io/ElementTransitions.js/

This repository is a wrapper around the code provided by a codrops article on page transitions. Their code has been modified to allow more than one animatable element per page. Additionally, you can now add transitions straight from html tags.

10 jQuery Plugins For Page Transition Effects With CSS3

7 – VOTUM Page Transition Plugin

https://rawgit.com/votum/page-transitions/master/demo/index.html

An easy, small and lightweight Javascript plugin for page transitions / sliding pages on mobile websites.

Features

-no jQuery required
-page transitions with slide effect
-slide from right to left, slide from left to right, slide up, slide down
-works on all relative links within your page (absolute links are called normal)
-choose a data-attribute for your links which should not slide
-native browser behaviour given, like middle click which opens link in a new tab
-updates also information in head (title, … )
-browser navigation support
-inject additional functions for call after slide finish
-possibility to give a special content container instead of whole body for slide

10 jQuery Plugins For Page Transition Effects With CSS3

8 – Page Transitions

http://labs.deinterfaz.com/PageTransitions/

A rework of the original idea created by Hakim El Hattab. Created using JavaScript, CSS 3D transforms and CSS Animations.

Transitions

-Kontext: Original idea by Hakim El Hattab
-Put On: A page drop effect
-Circle: Layers do a circle transition
-Bounce: Layers bounce after showing
-Flip: 360º flip

10 jQuery Plugins For Page Transition Effects With CSS3

9 – Fullscreen Pageflip Layout

http://tympanus.net/Tutorials/FullscreenBookBlock/

A tutorial on how to create a fullscreen pageflip layout using BookBlock. The idea is to flip the content like book pages and access the pages via a sidebar menu that will slide out from the left.

10 jQuery Plugins For Page Transition Effects With CSS3

10 – Backbone Page Transitions

http://demos.webspeaks.in/backbone-page-transitions/

Animating between different views in Backbone JS.

This is a small Backbone JS application that shows how we can animate views in Backbone JS. The animation effects have been generated using CSS3. The advantage of this application is that you need not to change anything in your views to apply the transition effect. This plugin only changes the way the viiews are rendered in the main application. This plugin has a render method that will render the views and apply necessary classes for the transition.

Tags: 10 jQuery Plugins For Page Transition Effects With CSS3

About the Author
Eric Tompkins

Eric Tompkins is an Experienced Web Developer and Digital Media Professional. As well as a Professional Photographer and Technical Instructor. You can follow on Twitter @_codemics.