PanelSnap

A JavaScript plugin that, after scrolling, snaps to blocks of content which I like to call panels. You can actually nest sets of panels as you will see throughout this demo page.

Each following panel will explain a specific feature of the PanelSnap plugin.

https://github.com/guidobouman/panelsnap

Scroll down to see more.

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.

Events

First

Second

Third

Large panels

First

Second

Third

When a panel is larger than the viewport, PanelSnap will snap to the top of a panel when scrolling down, and snap to it's bottom when scrolling up.

Horizontal snapping

First

Second

Third