jQuery.panelSnap

A jQuery 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/jquery-panelsnap

Scroll down to see more.

Basic setup

<!doctype html>
<html>
  <head>
    <script src="/path/to/jquery.js"></script>
    <script src="/path/to/jquery.panelSnap.js"></script>
    <script>
      jQuery(function($) {
        $('body').panelSnap();
      });
    </script>
  </head>
  <body>
    <section>
      ...
    </section>
    <section>
      ...
    </section>
    <section>
      ...
    </section>
  </body>
</html>

Options

<script>
  jQuery(function($) {
    var options = {
      $menu: false,
      menuSelector: 'a',
      panelSelector: '> section',
      namespace: '.panelSnap',
      onSnapStart: function(){},
      onSnapFinish: function(){},
      onActivate: function(){},
      directionThreshold: 50,
      slideSpeed: 200,
      easing: 'linear',
      offset: 0,
      navigation: {
        keys: {
          nextKey: false,
          prevKey: false,
        },
        buttons: {
          $nextButton: false,
          $prevButton: false,
        },
        wrapAround: false
      }
    };

    $('.panel_container').panelSnap(options);
  });
</script>

Keyboard

First

Second

Third

Try using the left & right keys to navigate through these panels.

Next/Prev Buttons

First

Second

Third

Callbacks

First

Second

Third

Log:

Events

First

Second

Third

Log:

Offset

First Section Header

First

Second Section Header

Second

Third Section Header

Third

Large panels

First

Second

Third

Large panels will snap to the top when scrolling down, and snap to their bottom when scrolling up.