lookforward
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 --saveor yarn
yarn add lookforwardUsage
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
Github
https://github.com/appleple/lookforward
Contributor
License
Code and documentation copyright 2017 by appleple, Inc. Code released under the MIT License.
