M-PageTransition

M-PageTransition is a jQuery plugin that allows you to easily have your web pages fade to and from a designated color.

Install and Usage

Clone the repo and import m-pagetransition.js and m-pagetransition-styles.css into your project.

Now add the m-pagetransition class to your body element (this will add visibility: hidden to your body to prevent flickering on page loads).

Now call mPageTransition() on your body element. You are done!

$(document).ready(function() {     $('body').mPageTransition(); });

Custom settings

To configure the color and fade times you can pass a settings object in the mPageTransition function.

$(document).ready(function() {     $('body').mPageTransition({         "color": "#007db8",         "fadeInTime": 350,         "fadeOutTime": 700     }); });

Examples

Clone the repo and in the examples directory open the index.html file for a local demo.

Soon there will be a live example!

Options

These can be passed via an object to the mPageTansition() method to configure the settings of the plugin.