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 |
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.