Cross-fading Page Transition Effects With jQuery - M-PageTransition

File Size: 5.92 KB
Views Total: 4994
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Cross-fading Page Transition Effects With jQuery - M-PageTransition

M-PageTransition is a lightweight jQuery plugin for displaying smooth fade In/out transition effects when the users navigate through your webpages.

How it works:

Fades the page from a given color to show the content and fades out to the given color.

How to use it:

1. Add the latest version of jQuery library and the jQuery M-PageTransion plugin's script to the webpages.

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="m-pagetransition.js"></script>

2. Load the official jquery-color plugin for color manipulation and animation support (OPTIONAL).

<script src="jquery.color.plus-names.min.js"></script>

3. Add the CSS class 'm-pagetransition' to the body tag.

<body class="m-pagetransition">

4. Set the initial visibility to 'hidden' on page loaded.

.m-pagetransition {
  visibility: hidden;
}

5. Call the function on the body tag and the plugin will do the rest.

$('body').mPageTransition();

6. Config the page transition effect with the following settings.

$('body').mPageTransition({

  // the color valuethat the page will fade to
  color: "#ffc107",

  // animation speed in milliseconds
  fadeOutTime: 300,
  fadeInTime: 300

});

This awesome jQuery plugin is developed by DoubleElite. For more Advanced Usages, please check the demo page or visit the official website.