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

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();
});

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
    });
});

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

Soon there will be a live example!

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