开发者

How to disable jQuery jParallax plugin on scroll and re-enable when scrolling stopped?

I have a fixed jParallax – http://webdev.stephband.info/jparallax/index.html – background with page elements that scroll over the fixed "parallaxing" background.

Issue: The plugin only wo开发者_如何学Gorks in the current viewport and stops working if you scroll down and have fixed positioning applied. So i want to disable the jParallax effect when i scroll and re-enable when i stop scrolling.

To control scrolling events i am using James Padolsey Special Scroll events for jQuery: http://james.padolsey.com/javascript/special-scroll-events-for-jquery/

I tried something like this:

    jQuery(window).bind('scrollstart', function(){
        jQuery('#parallax').jparallax({mouseResponse: false});
    });

    jQuery(window).bind('scrollstop', function(e){          
        jQuery('#parallax').jparallax({mouseResponse: true},{triggerExposesEdges: true}, {xtravel:0.2, ytravel:0.2}, {xtravel:0.6, ytravel:0.6}).append(corners);
    });

This triggers to many instances of jparallax and doesnt work properly.

Anyone who knows how to disable jparallax properly or someone that wrote an update on the original plugin by Stephen Band?

Are there any equivalent plugin alternatives that have a proper "disable" functionality?

Thanks for your help!


For those of you still looking at a solution for this problem, jQuery zLayers is out-dated and I'd suggest using a combination of

  1. plax - jQuery parallax plugin which supports enabling/disabling parallax on the fly https://github.com/cameronmcefee/plax

  2. jQuery Waypoints - for detecting when the user has scrolled to a certain point & to trigger the action http://imakewebthings.com/jquery-waypoints/

Here's some sample code combining the two:

    $('#some-div').waypoint(function(direction) {
        if (direction == "down"){
            $.plax.disable();
        }
        else {
            $.plax.enable();
        }
    });


I found a solution to the Problem by using the jQuery zLayers Parallax Plugin by Devin R. Olsen - http://www.devinrolsen.com/jquery-zlayers-parallax-plugin/.

I am still using the Special Scroll events for jQuery by James Padolsey: http://james.padolsey.com/javascript/special-scroll-events-for-jquery/

Haven't tested on IE yet but this seems to work fine on most browsers if i scroll page elements over a fixed fullscreen background with the parallax effect. Syntax would be something like:

    jQuery(window).bind('scrollstop', function(e){   
        $('#plax-1').zlayer({mass:5,confine:'push',canvas:'#parallax'});
        $('#plax-2').zlayer({mass:15,force:'push',canvas:'#parallax'});
        $('#plax-3').zlayer({mass:25,force:'push',canvas:'#parallax'});             
    }); 

Hope this might be useful for someone.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜