A small jQuery plugin that brings the snappy scrolling behavior that e.g. Apple uses for its iPhone 5s and 5c pages to your website. Works on desktop and mobile.
Demo * includes cat content
Bower is a package manager for the web. Once Bower is installed it is super easy to install jquery-snappish:
$ bower install jquery-snappishIf you prefer to get a fresh checkout of the Git repo, check our Github page or clone right away:
$ git clone https://github.com/philippbosch/jquery-snappish.gitDownload a ZIP archive of the source code:
jquery-snappish depends on jQuery (surprise!) and the following plugins:
If you are using Bower to install jquery-snappish it will automatically install these dependencies for you. Otherwise make sure you download them on your own.
In order to make use of jquery-snappish follow these steps:
<head><link href="path/to/jquery.snappish.css" rel="stylesheet"></body><script src="path/to/jquery.js"></script>
<script src="path/to/jquery.mousewheel.js"></script>
<script src="path/to/jquery.event.move.js"></script>
<script src="path/to/jquery.event.swipe.js"></script>
<script src="path/to/jquery.snappish.js"></script>#mywrapper in the example) and inside of that a container element (needs to have a class of .snappish-main) for the individual slides. Before or after the .snappish-container you can include other elements such as a navigation menu or a footer. It might be a good idea to apply position: fixed to these with CSS.
<div id="mywrapper">
<div class="snappish-main"><!-- we need this class name to determine the scrollable content -->
<div><!-- the first slide --></div>
<div><!-- the second slide --></div>
<div><!-- the third slide --></div>
<!-- create as many slides as you want -->
</div>
</div><script> tag or an exteral JS file$('#mywrapper').snappish();You may bind to the following events on the wrapper element:
scrollbegin.snappish – triggered just before the scrolling beginsscrollend.snappish – triggered when the scrolling transition finishesAn event handler that you bind to any of the two events will receive an object with some additional event parameters as the second argument (the first is always the jQuery event):
fromSlideNum – the number (0-based) of the slide being scrolled out of the viewportfromSlide – jQuery element of the slide being scrolled out of the viewporttoSlideNum – the number (0-based) of the slide being scrolled into the viewporttoSlide – jQuery element of the slide being scrolled into the viewporttransitionDuration – the duration of the scrolling transition in ms$('#mywrapper').on('scrollbegin.snappish', function(event, data) {
console.log('from slide', data.fromSlide, data.fromSlideNum);
console.log('to slide', data.toSlide, data.toSlideNum);
data.fromSlide.removeClass('active');
data.toSlide.addClass('active');
});In case you want to «remote control» the scrolling from your code (e.g. when the user clicks on a navigation item) you can do so by triggering one of the following events on the wrapper element:
scrollup.snappish – scroll up one slidescrolldown.snappish – scroll down one slidescrollto.snappish – scroll to the specified slide identified by its number (0-based) given as the second argument to the trigger() function.$('button.up').on('click', function(e) {
$('#mywrapper').trigger('scrollup.snappish'); // scroll up one slide
});
$('button.down').on('click', function(e) {
$('#mywrapper').trigger('scrolldown.snappish'); // scroll down one slide
});
$('button.top').on('click', function(e) {
$('#mywrapper').trigger('scrollto.snappish', 0); // scroll to the first (=0) slide
});
jquery-snappish is a project by Philipp Bosch, inspired by the scrolling behavior that Apple uses for their iPhone 5s and 5c websites. The original idea and some code was borrowed from this codepen by Josh Rutherford.