FadeIn & FadeOut Animations Between Pages - pageCrossfade

pageCrossfade is a jQuery plugin which uses CSS3 animation / opacity properties to create a subtle crossfade (fade in/out) effect when the user switches between webpages.

How to use it:

1. Include the latest version of jQuery library and the jQuery pageCrossfade plugin's JS & CSS files on your html page.

<link rel="stylesheet" href="pagecrossfade.css">
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="/pagecrossfade.js"></script>

2. Initialize the plugin by calling the function on the whole webpage and done.

$(function() {
  $('body').pageCrossFade();
});

3. Customize the crossfade effect:

$(function() {
  $('body').pageCrossFade({
    duration: 400,
    easing: 'swing',
  });
});

4. Specify which link type will trigger the crossfade effect when clicked.

$(function() {
  $('body').pageCrossFade({

    // 'internal', 'all' or a specific CSS ID/Class
    links: 'internal'
    
  });
});

---

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