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,
easing: 'linear',
offset: 0,
navigation: {
keys: {
nextKey: false,
prevKey: false,
},
buttons: {
$nextButton: false,
$prevButton: false,
},
wrapAround: false
}
};
$('.panel_container').panelSnap(options);
});
</script>