Smooth Page Transition Effects With Browser History Support - lookforward.js

lookforward.js is a simple-to-use JavaScript library that creates a smooth transition effect when you navigate between pages in the website.

The plugin loads pages with a loading indicator using the Fetch API and displays a smooth transition effect when the pages are loaded.

Works both with jQuery and Vanilla JavaScript. It also supports rewriting URL on page transitions using History API.

How to use it:

1. Install & download the package.

# Yarn
$ yarn add lookforward

# NPM
$ npm install lookforward --save

2. Import the lookforward.js into the document.

<script src="/path/to/lookforward.min.js"></script>

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery-lookforward.min.js"></script>

3. Create anchor links poiting to the internal pages within your website and define the transition effect using the data-transition-enter and data-transition-leave attributes. All possible transition effects:

• slideleft
• slideright
• slideup
• slidedown
• scaleup
• scaledown

<a href="internal.html" 
   class="js-lookforward" 
   data-transition-enter="slideleft" 
   data-transition-leave="slideright">
   Goto Internal.html
</a>

4. Initialize the lookforward.js library and done.

// vanilla JS
window.addEventListener('DOMContentLoaded',function(){
  new LookForward(".js-lookforward");
});

// jQuery
$(function(){
  $(".js-lookforward").lookforward();
});

5. Available options to customize the page transition effect.

// default CSS classes
classNames: {
  LookForward: 'lookforward',
  LookForwardBody: 'lookforward-body',
  LookForwardInner: 'lookforward-inner',
  LookForwardClose: 'lookforward-close',
  LookForwardCloseBtn: 'lookforward-close-btn',
  LookForwardHeader: 'lookforward-header',
  LookForwardFooter: 'lookforward-footer',
  LookForwardLoader: 'lookforward-loader',
  LookForwardLoaderWrap: 'lookforward-loader-wrap'
},
closeBtnClass: 'js-lookforward-close-btn',

// transition names
transitionEnter: '',
transitionLeave: '',

// parent container
scrapedArea: 'body',

// auto rewrite URL using History API
useHistoryApi: true

---

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