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.
<!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>
<script>
jQuery(function($) {
var options = {
$menu: false,
menuSelector: 'a',
panelSelector: 'section',
namespace: '.panelSnap',
onSnapStart: function(){},
onSnapFinish: function(){},
onActivate: function(){},
directionThreshold: 50,
slideSpeed: 200,
keyboardNavigation: {
enabled: false,
nextPanelKey: 40,
previousPanelKey: 38,
wrapAround: true
}
};
$('.panel_container').panelSnap(options);
});
</script>