Turn off Parallax for mobile devices Visual Composer

wordpress

#1

Does anyone know how to prevent parallax from working when the browser is on a mobile device?


#2

I have the same problem…


#3

I did a bit of Googling to see if there was a built in solution to this but I’m not finding anything.

A quick solution I’m thinking is to just give the parallax row a class like desktop-only and then copy the row and give that one a class of mobile only and remove the parallax option. Then in the css set mobile-only to display: none and then in a media query set desktop-only to display: none and mobile-only to display: block.

Not ideal but should work.


#5

Ximir I think you missed the point of the whole thread, we’re looking for a way to DISABLE parallax on MOBILE DEVICES, clearly we all know how to turn on the parallax effect if we’re looking for a way to disable it. Your answer has no relevance what so ever.


#6

FYI…

If anyone is interested I threw some jQuery together to automatically disable parallax in Visual Composer on mobile. It basically just removes the parallax class once you get under 800px, change this to fit your needs (ie. 768 instead of 800).

Throw this in a javscript file or in a raw js element on your page:

jQuery(window).ready(function() {
var windowWidth = jQuery(window).width();
/*** DISABLE PARALLAX ON MOBILE ON LOAD ***/
if(windowWidth <= 800) {
    jQuery('.vc_parallax-content-moving').each(function () {
        jQuery(this).removeClass('vc_parallax');
    });
}

/*** DISABLE PARALLAX ON MOBILE ON RESIZE ***/
jQuery(window).on('resize', function () {
    var windowWidth = jQuery(window).width();
    /*** DISABLE PARALLAX ON MOBILE ON LOAD ***/
    if(windowWidth <= 800) {
        jQuery('.vc_parallax-content-moving').each(function () {
            jQuery(this).removeClass('vc_parallax');
        });
    } else {
        jQuery('.vc_parallax-content-moving').each(function () {
            jQuery(this).addClass('vc_parallax');
        });
    }
});

});


#7

Instead of removing the classes you can destroy the parallax functionality completely like this:

if ( window.vcParallaxSkroll ) {
    window.vcParallaxSkroll.destroy();
}

#8

I did not like would be the code.

Just put it where? in functions.php?

if ( window.vcParallaxSkroll ) {
window.vcParallaxSkroll.destroy();
}


#9

You could use Enquire and FastClick, I use it with stellar.js but you can attach any script with it:

var e = $(window),
    n = {
        mobileDown: "screen and (max-width: 768px)",
        tabletDown: "screen and (max-width: 991px)",
        desktop: "screen and (min-width: 991px)"
    };
window.FastClick.attach(document.body), enquire.register(n.desktop, function() {
    e.stellar({
        verticalScrolling: true,
        verticalOffset: false,
        horizontalScrolling: false,
        responsive: true,
        scrollProperty: "scroll",
        positionProperty: "transform",
        parallaxBackgrounds: true,
        parallaxElements: true,
        hideDistantElements: false
    });
    
}).register(n.tabletDown, function() {
    e.stellar("destroy"),
    $("[data-stellar-ratio]").removeAttr("style");
}).register(n.mobileDown, function() {
})

#10

It is possible to disable all animations on mobile? CSS animations.


#11
.vc_parallax-inner.skrollable{top: 0 !important}

You can disable it vis css :smiley: