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.