A jQuery plugin for panning website visuals and screenshots by mouse movement in a fixed height <div>
Above you can see an example of the scroller, please refer to the README on GitHub for usage instructions.
Laurence Elsdon originally developed the script at Adept in 2010 for their website redesign, then in 2012 he repackaged the scroller as a jQuery plugin and released the code on GitHub. In 2015 he once more revisited the project, rebranding it as VisPan - The Visual Panning plugin - and making packages available via NPM and Bower.
A jQuery plugin for panning website visuals and screenshots by mouse movement in a fixed height <div>
Packages are available via Bower and NPM
npm install --save vispan
bower install --save vispan
Include dist/css/vispan.css and dist/js/vispan.js in your page, ensuring jQuery is loaded first.
<!-- css -->
<link rel="stylesheet" href="bower_components/vispan/dist/css/vispan.css">
<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- VisPan -->
<script src="bower_components/vispan/dist/js/vispan.js"></script>
Format your website visuals/slides in the following format
<div id="visuals">
<div><img src="assets/img/web/home.jpg"></div>
<div><img src="assets/img/web/about.jpg"></div>
<div><img src="assets/img/web/contact-us.jpg"></div>
</div>
Give #visuals a fixed height
#visuals {
height: 420px;
}
Finally, call the vispan method in your javascript
$(document).ready(function() {
$('#visuals').vispan()
})
