Created
July 18, 2012 17:14
-
-
Save garyv/3137543 to your computer and use it in GitHub Desktop.
A continous side scrolling jquery plugin
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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