The pagecrossfade plug-in for generating fading effect
The pagecrossfade will generate the fading effect by using jQuery and CSS3 as a user navigates from one page to another in your website.
You may control the easing and duration of fade-in and fade-out as crossing between the pages. The plug-in is tiny in size; the only 1K minified version but may add the pleasant impact in user’s part.
Demo1 Demo2
Download plug-in
How to set up pagecrossfade plug-in on your website?
Follow these steps.
Step1:
Download the plug-in from above link and get the pagecrossfade.js and pagecrossfade.css file from the package.
Step2:
Include the reference to these files on the web page where you want to generate cross fading effect. The CSS file in <head> section.
<link rel=”stylesheet” href=”css/jquery-pagecrossfade/pagecrossfade.css”>
Include the JS file after the jQuery file above the </body> tag:
<script type=”text/javascript” src=”js/jquery-pagecrossfade/pagecrossfade.js”></script>
Initiate the plug-in with body selector with default or custom options:
$(‘body’).pageCrossFade();
See the demos below with script and markup.
A demo of fadeIn and fadeout with default settings
In this example of showing the usage of crossfade plug-in, the default options are used. That means, as you press the button in the demo page, it will reload the same page with fade effect. The default duration of 400 milliseconds with swing easing value will be used.
See online demo and code
The Script:
<script type="text/javascript">
$(function() {
$('body').pageCrossFade();
});
</script>
A demo with available options
In this example, the duration is set as 3000 milliseconds (three seconds), so the effect will be slower with the linear value for easing option.
Note that, you may only use the linear or swing values for the easing option.
See online demo and code
The script:
<script type="text/javascript">
$(function() {
$('body').pageCrossFade({
duration: 3000,
easing: 'linear',
links: 'internal'
});
});
</script>
For learning more about this plug-in, visit the developer’s page.