/lookforward

A small library that helps you to create smooth transitions between pages with the easiest way

Primary LanguageJavaScriptMIT LicenseMIT

lookforward

npm version CircleCI npm download GitHub license

It supports simple page transitions using HistoryAPI

See https://appleple.github.io/lookforward/ for complete docs and demos

Feature

Installation

via npm

npm install lookforward --save

or yarn

yarn add lookforward

Usage

require

const lookforward = require('lookforward');

lookforward.js

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

jquery-lookforward.js

$(function(){
    $(".js-lookforward").lookforward();
});
<a href="./a.html" class="js-lookforward" data-transition-enter="slideup" data-transition-leave="slidedown">Open</a>

Option

{
  classNames: {
    LookForward: 'lookforward',
    LookForwardBody: 'lookforward-body',
    LookForwardInner: 'lookforward-inner',
    LookForwardClose: 'lookforward-close',
    LookForwardCloseBtn: 'lookforward-close-btn',
    LookForwardHeader: 'lookforward-header',
    LookForwardFooter: 'lookforward-footer'
  },
  scrapedArea: 'body', // Area to be scraped
  useHistoryApi: true // Rewrite URL on page transitions using HistoryAPI
}

Event

// when the modal is opened
lookforward.on('open',function(e){
  console.log('open');
});

// when the modal is closed
lookforward.on('close',function(e){
  console.log('close');
});

// when all modals are closed
lookforward.on('closeAll',function(e){
  console.log('closeAll');
});

Tips

If you want to execute JavaScript on each pages, I recommend you specifying scraped area so to exclude common JavaScript such as jQuery and include local JavaScript. The following is the example how

<body>
  <div class="js-lookforward-body">
    <!-- contents here -->
    <script src="/path/to/local.js"></script>
  </div>
  <script src="/path/to/lookforward.js"></script>
  <script>
  new LookForward('.js-lookforward', {
    scrapedArea: '.js-lookforward-body',
    execInnerScript: true
  });
  </script>
</body>

Download

Download ZIP

Github

https://github.com/appleple/lookforward

Contributor

@steelydylan

License

Code and documentation copyright 2017 by appleple, Inc. Code released under the MIT License.