panelsnap
Version:
A JavaScript plugin that provides snapping functionality to a set of panels within your interface.
160 lines (148 loc) • 4.79 kB
HTML
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>PanelSnap</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300" rel="stylesheet">
<link href="./style.css" rel="stylesheet">
<script src="./panelsnap.js" defer></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
window.panelsnap = new PanelSnap();
});
</script>
</head>
<body>
<section class="introduction">
<div class="center">
<h1>
PanelSnap
</h1>
<p>
A JavaScript plugin that, after scrolling, snaps to blocks of content which I like to call panels. It's API makes the plugin
easy to tailor to the needs of your project.
</p>
<p>
Each of the following panels will explain a specific aspect of the PanelSnap plugin.
</p>
<p>
<a href="https://github.com/guidobouman/panelsnap">https://github.com/guidobouman/panelsnap</a>
</p>
</div>
<div class="bottom"></div>
</section>
<section class="basic_setup">
<h1>
Basic setup
</h1>
<pre><!doctype html>
<html>
<head>
<script src="/path/to/panelsnap.js" defer></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
new PanelSnap();
});
</script>
</head>
<body>
<section>
...
</section>
<section>
...
</section>
<section>
...
</section>
</body>
</html></pre>
</section>
<section class="configuration">
<h1>
Options
</h1>
<pre><script>
var defaultOptions = {
container: document.body,
panelSelector: '> section',
directionThreshold: 50,
delay: 0,
duration: 300,
easing: function(t) { return t },
};
new PanelSnap(options);
</script></pre>
</section>
<section class="options_explained">
<h1>Options explained</h1>
<dl class="explanation">
<dt>container</dt>
<dd>(element) The (scrolling) container that contains the panels.</dd>
<dt>panelSelector</dt>
<dd>(string) The css selector to find the panels. (scoped within the container).</dd>
<dt>directionThreshold</dt>
<dd>(interger) The amount of pixels required to scroll before the plugin detects a direction and snaps to the next panel.</dd>
<dt>delay</dt>
<dd>(integer) The amount of miliseconds the plugin pauzes before snapping to a panel.</dd>
<dt>duration</dt>
<dd>(integer) The amount of miliseconds in which the plugin snaps to the desired panel.</dd>
<dt>easing</dt>
<dd>(function) An easing function specificing the snapping motion.</dd>
</dl>
</section>
<section class="api">
<h1>
API
</h1>
<dl class="explanation">
<dt>on([string] eventName, [function] callbackFunction(panel))</dt>
<dd>
Subscribe to a specific event with your own function. Where eventName is one of `activatePanel`, `snapStart`, `snapStop`
and callbackFunction is a function that gets called with the panel that is the subject of the event.
</dd>
<dt>off([string] eventName, [function] callbackFunction(panel))</dt>
<dd>
Unsubscribe one of your subscriptions. Where eventName is one of `activatePanel`, `snapStart`, `snapStop` and callbackFunction
is the function that was used to subscribe to the event.
</dd>
<dt>snapToPanel([DOM Element] panel)</dt>
<dd>
Trigger a snap to a panel. Where panel is one of the panels within the container.
</dd>
</dl>
</section>
<section class="default_demo">
<h1>
Demos
</h1>
<p>
Common usecases are explained through a set of demos.
</p>
<ul>
<li>
<a href="./demos/basic">Basic setup</a>
</li>
<li>
<a href="./demos/horizontal">Horizontal scrolling</a>
</li>
<li>
<a href="./demos/menu">Interactive menu</a>
</li>
<li>
<a href="./demos/jquery/">jQuery setup</a>
</li>
<li>
<a href="./demos/vue">Vue.js setup</a>
</li>
<li>
<a href="./demos/react">React setup</a>
</li>
</ul>
<p>
These demos can also be found on
<a href="https://github.com/guidobouman/panelsnap/tree/develop/docs/demos">GitHub</a>.
</p>
</body>
</html>