PanelSnap

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.

Each of the following panels will explain a specific aspect of the PanelSnap plugin.

https://github.com/guidobouman/panelsnap

Basic setup 

<!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>

Options 

<script>
  var defaultOptions = {
    container: document.body,
    panelSelector: '> section',
    directionThreshold: 50,
    delay: 0,
    duration: 300,
    easing: function(t) { return t },
  };

  new PanelSnap(options);
</script>

Options explained

container
(element) The (scrolling) container that contains the panels.
panelSelector
(string) The css selector to find the panels. (scoped within the container).
directionThreshold
(interger) The amount of pixels required to scroll before the plugin detects a direction and snaps to the next panel.
delay
(integer) The amount of miliseconds the plugin pauzes before snapping to a panel.
duration
(integer) The amount of miliseconds in which the plugin snaps to the desired panel.
easing
(function) An easing function specificing the snapping motion.

API

on([string] eventName, [function] callbackFunction(panel))
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.
off([string] eventName, [function] callbackFunction(panel))
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.
snapToPanel([DOM Element] panel)
Trigger a snap to a panel. Where panel is one of the panels within the container.
destroy()
Destroy the panelsnap instance and clear all state & eventlisteners. This allows for a new PanelSnap instance to be created on the same container if so desired.

Demos

Common usecases are explained through a set of demos.

These demos can also be found on GitHub.