smooth vertical panel sliding using waypoints
!logo

Smooth vertical sliding panels using Waypoints.
npm i panelify --save
Quickstart: see the demo
Panelify requires markup similar to the following (a transparent-padder element is needed to fill the space when overlaying panels):
``html
$3
Customise as necessary, but a nice and simple example can be found in the demo css.
$3
This is a front end package; the current easiest way to implement it is:
Then you can call it in your own script like:
`javascript
// grab and initialise the waypoint offset to bottom-in-view (bottom of each panel)
var panelify = new Panelify();
`$3
offset: either 0% or bottom-in-view (default: bottom-in-view)*
0%: this triggers the panelify event as soon as the top of the panel is in the viewport (nicer for short content that fits in one 'screen') 1. Example:
var panelify = new Panelify('0%');*
bottom-in-view (default): this triggers the panelify event when the bottom of the current panel comes into the viewport (better for longer content). 1. Example:
let panelify = new Panelify();
2. Example: let panelify = new Panelify('bottom-in-view');
minScreenWidth: the minimum screen width (in pixels) where panelify will be triggered and non static (default: 1068) * NOTE: anything less than
1068 is not officially supported and shouldn't be used in production. 1. It will still work on all desktop browsers if decreased (e.g. if a browser is resized)
2. Phones/Tablets bug out to various degrees (Safari iOS on iPhone/iPad handle it well, except for when the popup menus appear if overscrolled. Android phones bug out for more complicated reasons).
Build
src/panelify.js transpiles, minifies and is copied to dist/panelify.js.$3
* Clone/download repo
*
cd to the panelify/ directory
* npm install$3
*
webpack - for building once for development
* webpack --watch - for continuous incremental build in development$3
*
webpack -p` - for building for production (minification)Desktop: Chrome, Firefox, Safari, Edge, IE9+
Tablet/Mobile: None yet. Falls back to static panels (unless defaults are overridden). This is due to issues with the built-in URL/Navigation bars have meant this is still under development.
See issues; general feature improvements are also welcome!
Panelify is licensed under the MIT License.