Adding a parallax effect

GenerateBlocks doesn’t have an option to use parallax for its background images at this time.

For now, you can use some custom javascript and a CSS class.

First, the javascript:

window.addEventListener( 'scroll', throttle( parallax, 14 ) );

function throttle( fn, wait ) {
    var time = Date.now();
    return function() {
        if ( ( time + wait - Date.now() ) < 0 ) {
            fn();
            time = Date.now();
        }
    }
};

function parallax() {
    var scrolled = window.pageYOffset;
    var parallax = document.querySelector( '.parallax' );
    // You can adjust the 0.4 to change the speed
	var coords = ( scrolled * 0.4 ) + 'px'
    parallax.style.transform = 'translateY(' + coords + ')';
};

Then we need to add a little CSS:

.parallax {
    overflow-y: hidden;
}

Now we just need to add a CSS class to the Container block: parallax

2 Likes

I am not that an expert in JS… I tried to inject the above code either via the Plugin “Code Snippets” or via “Head, Footer and Post Injections”, but it does not work (produces errors).

Maybe you can help me with the exact snippet I have to put

…Got it, but as far as I can see, it is only possible to have parallax only working for one element per page (despite having the css class assigned to different elements)