git-demyan / lookforward

lookforward

It supports simple page transitions using HistoryAPI

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

Feature

Installation

• npm
• standalone

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');
});

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.