Skip to content

Instantly share code, notes, and snippets.

@leegee
Created February 10, 2015 11:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save leegee/2bb7f6f6033e1ffbd6a5 to your computer and use it in GitHub Desktop.
Save leegee/2bb7f6f6033e1ffbd6a5 to your computer and use it in GitHub Desktop.
Vertically scrolling slide show, cf Valentino
/** Vertically scrolling slide show, cf Valentino
<script src='js/scroll2next.js'></script>
<script>
jQuery(document).ready( function () {
document.body.scrollTop = document.documentElement.scrollTop = 0;
new Scroll2Next({
container: '#container',
selector: 'img'
});
});
</script>
**/
var Scroll2Next = function (args) {
this.container = jQuery(args.container);
this.container.css({
overflow: 'auto',
position: 'relative',
width: '100%',
height: '100%'
});
this.selector = args.selector || 'img';
this.els = jQuery( args.container + ' '+ this.selector );
for (var i=0; i<this.els.length; i++){
this.els[i] = jQuery( this.els[i] );
}
this.direction = 0;
this.scrollDuration = 300;
this.delayAfter = 200;
this.currentIndex = 0;
this.lastViewTop = -1;
this.ready = true;
var self = this;
this.container.on('scroll', function (e) {
e.preventDefault();
e.stopPropagation();
self.scrollContainer();
return false;
} );
};
Scroll2Next.prototype.scrollContainer = function() {
if (this.ready == false){
return;
}
this.ready = false;
this.viewTop = this.container.scrollTop();
this.viewBottom = this.viewTop + jQuery(window).height();
this.direction = this.viewTop >= this.lastViewTop? 1 : -1;
this.currentIndex += this.direction;
if (this.currentIndex >= 0 && this.currentIndex < this.els.length){
// this.els[ this.currentIndex ][0].scrollIntoView();
var self = this;
self.container.animate(
{
scrollTop: self.els[self.currentIndex].offset().top
// - self.container.offset().top
+ this.container.scrollTop()
},
self.scrollDuration,
function () {
self.lastViewTop = self.container.scrollTop();
setTimeout( function (){
self.ready = true
}, self.delayAfter );
}
);
}
else {
this.currentIndex -= this.direction;
this.ready = true;
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment