jQuery Plugin For Single Page Transitions - FadeNavigation

FadeNavigation is a jQuery plugin to create a single page navigation that allows you to navigate through web content with fade in/out transitions.

How to use it:

1. Create a single page navigation from a nav list.

<nav>
  <ul>
    <li><a href="#" class="navToPrev"><<</a></li>
    <li><a href="#section-1" class="navTo">Section 1</a></li>
    <li><a href="#section-2" class="navTo">Section 2</a></li>
    <li><a href="#section-3" class="navTo">Section 3</a></li>
    <li><a href="#section-4" class="navTo">Section 4</a></li>
    <li><a href="#" class="navToNext">>></a></li>
  </ul>
</nav>

2. Create sectioned content as follows.

<main id="container">
  <section id="section-1" class="page">
    <h1>Section One</h1>
  </section>
  <section id="section-2" class="page">
    <h1>Section Two</h1>
  </section>
  <section id="section-3" class="page">
    <h1>Section Three</h1>
  </section>
  <section id="section-4" class="page">
    <h1>Section Four</h1>
  </section>
</main>

3. Include jQuery library and the jQuery FadeNavigation plugin at the bottom of your web page.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="js/jquery.fadenavigation.min.js"></script>

4. Call the plugin on the main container to enable the page transitions.

$('#container').fadeNavigation();

5. Default settings.

pageSelector: '.page', 
fadeSpeed: 'fast'

Change log:

2015-05-25

• add pageSelector and fadeSpeed options

---

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