CODEWITHSUNDEEP
javascriptjqueryscroll
Roger
Roger

Reputation: 8576

Scroll control with JQuery / Java Script

I am looking for to mimic the same scroll behavior the new Flickr website has at https://www.flickr.com/#section-1.

No matter how hard or fast you move your mouse scroll wheel the result is the same.

I know this is a kind of parallax website but I am more interested in the scroll control.

This is what I am doing right now using this plugin https://github.com/ultrapasty/jquery-disablescroll: 

var mypos = $(window).scrollTop();
var up = false;
var newscroll;
$(window).scroll(function () {
    newscroll = $(window).scrollTop();
    if (newscroll > mypos && !up) {
        $(window).disablescroll(); //disable scroll
        //$('body').addClass('stop-scrolling'); //a css that inputs an overflow hidden
        $('#video_bkg').stop().animate({
            height: 'toggle',
            opacity: 'toggle'
        }, 500);
        up = !up;
    } else if(newscroll < mypos && up) {
        $('#video_bkg').stop().animate({
            height: 'toggle',
            opacity: 'toggle'
        }, 500, function() {
            $(window).disablescroll('undo'); //reenable scroll
        });
        up = !up;
    }
    mypos = newscroll;
});

But none of this equals the Flickr's effect.

Upvotes: 0

Views: 133

Answers (1)

Lloyd Banks
Lloyd Banks

Reputation: 36638

Here's an example that does this using the fullPage jQuery plugin.

Use 

$(document).ready(function() {
    $('#fullpage').fullpage();
});

to initialize the script.

Upvotes: 1

Related Questions