appleple / Lookforward
Licence: mit
A small library that helps you to create smooth transitions between pages with the easiest way
Stars: ✭ 298
Programming Languages
javascript
184084 projects - #8 most used programming language
es2015
71 projects
Labels
Projects that are alternatives of or similar to Lookforward
Multiple Dates Picker For Jquery Ui
MDP is a little plugin that enables jQuery UI calendar to manage multiple dates.
Stars: ✭ 256 (-14.09%)
Mutual labels: npm
Input Range Scss
Styling Cross-Browser Compatible Range Inputs with Sass
Stars: ✭ 272 (-8.72%)
Mutual labels: npm
Draggable Vue Directive
Vue2 directive that handles drag & drop
Stars: ✭ 286 (-4.03%)
Mutual labels: npm
Thanks
🙌 Give thanks to the open source maintainers you depend on! ✨
Stars: ✭ 2,753 (+823.83%)
Mutual labels: npm
saber-theme-tailsaw
A Saber theme for blogging, based on Jigsaw's Blog Template.
Stars: ✭ 53 (-82.21%)
Mutual labels: page-transitions
Arcgis Js Api
Minified version of the ArcGIS API for JavaScript
Stars: ✭ 290 (-2.68%)
Mutual labels: npm
Quickfix
The best stupid idea for fixing problems in node modules.
Stars: ✭ 267 (-10.4%)
Mutual labels: npm
Tooltip Sequence
A simple step by step tooltip helper for any site
Stars: ✭ 287 (-3.69%)
Mutual labels: npm
Swup
🎉 Complete, flexible, extensible and easy to use page transition library for your static web.
Stars: ✭ 3,190 (+970.47%)
Mutual labels: page-transitions
Express React Fullstack
Simple, Useful Full Stack Express and React Application
Stars: ✭ 286 (-4.03%)
Mutual labels: npm
ionic-modal-custom-transitions
Add Custom Transitions to Ionic Modals.
Stars: ✭ 22 (-92.62%)
Mutual labels: page-transitions
Advanced Nodejs
For help, ask in #questions at slack.jscomplete.com
Stars: ✭ 273 (-8.39%)
Mutual labels: npm
React Cookie Consent
A small, simple and customizable cookie consent bar for use in React applications.
Stars: ✭ 293 (-1.68%)
Mutual labels: npm
Pacote
programmatic npm package and metadata downloader (moved!)
Stars: ✭ 281 (-5.7%)
Mutual labels: npm
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 --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
Github
https://github.com/appleple/lookforward
Contributor
License
Code and documentation copyright 2017 by appleple, Inc. Code released under the MIT License.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].