Support » Theme: Twenty Twenty-One » Parallax Scrolling Effect

  • Is it possible through this theme, or through the Twenty Twenty One options plugin, that we can incorporate a Parallax scrolling effect in the background? For example, have background images scroll down slower than speed of the mouse scrolling the page down?

    If so, is there a guide we can follow for setting this up?

    Many thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Oliver Campion

    (@domainsupport)

    Absolutely!

    I believe you can already setup a fixed background to simulate a sort of parallax but I think you are referring instead to a true parallax where the background moves at a slower rate as you scroll?

    This would require some JavaScript and we will get to work adding it as an option to Options for Twenty Twenty-One plug-in.

    One last question, are you looking to parallax the main site background or the background of a cover header block?

    Oliver

    Thread Starter klewis

    (@blackawxs)

    In my case, it would be for cover header block.

    many thanks!

    Oliver Campion

    (@domainsupport)

    I thought it might be. I’ll take a look at this and get back to you.

    It will require a bit of CSS and JavaScript which you’ll be able to inject with a plugin like Simple Custom CSS and JS rather than having to create a child theme.

    Oliver

    Oliver Campion

    (@domainsupport)

    OK, so this gave me quite a headache 🙂 but here you go. This is the CSS you need …

    .wp-block-cover {
    	overflow: hidden;
    }

    … and this is the JavaScript that works the magic …

    window.addEventListener('scroll', function() {
            if (window.matchMedia('(min-width: 482px)').matches) {
                Array.prototype.forEach.call(document.getElementsByClassName('wp-block-cover'), function(wpBlockCover) {
                    var $images = wpBlockCover.getElementsByTagName('img'), $image;
                    if ($images) {
                        $image = $images[0];
                        if ((pageYOffset + window.innerHeight > wpBlockCover.offsetTop) && (pageYOffset < wpBlockCover.offsetTop + wpBlockCover.offsetHeight)) {
                            $image.style.transform = 'scale(1.5) translateY(' + ((0.5 / (0.5 + 1) * 50) - (((pageYOffset - wpBlockCover.offsetTop + window.innerHeight) / (wpBlockCover.offsetTop + wpBlockCover.offsetHeight - wpBlockCover.offsetTop + window.innerHeight)) * (0.5 / (0.5 + 1) * 100))) + '%)';
                        }
                    }
                });
            }
        });

    If you can’t get it working, we’ve added it as an option in Options for Twenty Twenty-One plugin.

    Oliver

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.