Cross-fading Page Transition Effects With jQuery - M-PageTransition
| File Size: | 5.92 KB |
|---|---|
| Views Total: | 5017 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
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.
