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.

http://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