Skip to content

Instantly share code, notes, and snippets.

@garyv
Created July 18, 2012 17:14
Show Gist options
  • Save garyv/3137543 to your computer and use it in GitHub Desktop.
Save garyv/3137543 to your computer and use it in GitHub Desktop.
A continous side scrolling jquery plugin
// jquery.sidescroll.js
// https://gist.github.com/3137543
// A continous side scrolling jquery plugin
// How to use:
// $( 'ul.slideshow' ).sideScroll()
(function JQUERY_SIDE_SCROLL( $ ) {
$.sideScroll = {
defaults: {
itemWidth: 320,
itemMargin: 10,
itemDuration: 5000,
gpuAccelerate: true
}
};
$.fn.sideScroll = function INIT_SIDE_SCROLL( options ) {
options = $.extend( $.sideScroll.defaults, options||{} );
var list = this,
slides = list.children(),
length = slides.length,
itemWidth = options.itemWidth + options.itemMargin,
firstElement = list.children( ':first' );
left = 0,
// at end of animating slide, change slide order, and animate again
animateNext = function NEXT_ANIMATE_SIDE_SCROLL() {
list.append( firstElement ).css( 'left', left );
animateSlide();
firstElement = list.children( ':first' );
},
// animate single slide
animateSlide = function ANIMATE_SLIDE_SIDE_SCROLL() {
list.animate( {
left: '-=' + itemWidth
}, options.itemDuration, 'linear', animateNext);
};
// initialize css for animation
(function INIT_CSS_SIDE_SCROLL() {
list.width( length * itemWidth )
.css( {
position: 'absolute',
zIndex: 1,
left: left
} )
.find( 'a' ).css( 'display', 'block' );
list.find( 'img' ).css( {
display: 'block',
maxWidth: itemWidth + 'px'
} );
// accelerate graphics in webkit & firefox
if ( options.gpuAccelerate ) {
list.parent().css( {
'-webkit-perspective': 1000,
'-webkit-backface-visibility': 'hidden',
'-moz-perspective': '1px',
'-moz-perspective-origin': '0%'
} );
}
slides.each( function(i) {
// standardize item widths
slides.eq(i).width( options.itemWidth );
});
})();
// stop animation on hover
list.hover( function HOVER_SIDE_SCROLL() {
list.stop();
left = parseInt( list.css( 'left' ), 10 );
}, animateSlide);
// begin animation
animateSlide();
return this.each( function(){} );
};
})( jQuery );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment