Smooth vertical sliding panels using Waypoints.
Installation
npm i panelify --save
Basic Usage
Quickstart: see the demo
HTML
Panelify requires markup similar to the following (a transparent-padder
element is needed to fill the space when overlaying panels):
Panel 1 content... Panel 2 content... Panel 3 content...
CSS
Customise as necessary, but a nice and simple example can be found in the demo css.
JavaScript
This is a front end package; the current easiest way to implement it is:
<script src="[Path to node_modules goes here]/panelify/dist/panelify.js"></script>
Then you can call it in your own script like:
// grab and initialise the waypoint offset to bottom-in-view (bottom of each panel)var panelify = ;
Options
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')- Example:
var panelify = new Panelify('0%');
- Example:
-
bottom-in-view
(default): this triggers the panelify event when the bottom of the current panel comes into the viewport (better for longer content).- Example:
let panelify = new Panelify();
- Example:
let panelify = new Panelify('bottom-in-view');
- Example:
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.-
It will still work on all desktop browsers if decreased (e.g. if a browser is resized)
-
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
.
Basic
- Clone/download repo
cd
to thepanelify/
directorynpm install
Development
webpack
- for building once for developmentwebpack --watch
- for continuous incremental build in development
Production
webpack -p
- for building for production (minification)
Browser Support
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.
Contributing
See issues; general feature improvements are also welcome!
License
Panelify is licensed under the MIT License.