Home Layout & Interfacejquery snaps to blocks of content - JQUERY.PANELSNAP

jquery snaps to blocks of content - JQUERY.PANELSNAP

10 years ago Views

7539

1496

guidobouman

jquery snaps to blocks of content - 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.

THE BASIC SETUP

<html>
  <head>
    <script src="/path/to/jquery.js"></script>
    <script src="/path/to/jquery.customEvents.js"></script>
    <script src="/path/to/jquery.panelSnap.js"></script>
    <script>
      $('body').panelSnap();
    </script>
  </head>
  <body>
    <section>
      ...
    </section>
    <section>
      ...
    </section>
    <section>
      ...
    </section>
  </body>
</html>

CONFIGURATION OPTIONS

  var options = {
    $menu: false,
    menuSelector: 'a',
    panelSelector: 'section',
    namespace: '.panelSnap',
    onSnapStart: function(){},
    onSnapFinish: function(){},
    directionThreshold: 50,
    slideSpeed: 200
  };

  $('.panel_container').panelSnap(options);

Tag: panel snap