[Resolved] Can sections already be replaced by GenerateBlocks ?

[Frans]

Hi,

Is there already a Generateblocks block that mimics a section with parallax-effect of the background image? I have a page with sections and created columns with LightweightGridColumns. Can I replace LWGC and the sections with GenerateBlocks ?

Thanks !

Frans

[Tom]

Hi there,

Not at this time. However, you can easily implement your own parallax script and target a custom class with it that you can then add to your Container blocks.

You can absolutely replace Lightweight Grid Columns with GenerateBlocks – it’s 1000x better 🙂

[Frans]

Thanks ! Can you recommend a parallax script ? I found a css solution at w3schools.com, but it does not work on mobile, whereas the section solution of GPP does work on mobile.

Is there another css solution ? Javascript solution as a hook ?

Thanks !

Frans

[Tom]

This is one solution:

function your_parallax_element( selector, context ) {
    context = context || document;
    var elements = context.querySelectorAll( selector );
    return Array.prototype.slice.call( elements );
}

window.addEventListener( "scroll", function() {
    var scrolledHeight= window.pageYOffset;
    your_parallax_element( ".YOUR-PARALLAX-CLASS-HERE" ).forEach( function( el, index, array ) {
        var limit = el.offsetTop + el.offsetHeight;
        if( scrolledHeight > el.offsetTop && scrolledHeight <= limit ) {
            el.style.backgroundPositionY = ( scrolledHeight - el.offsetTop ) / 2 + "px";
        } else {
            el.style.backgroundPositionY = "0";
        }
    });
});

You just need to update YOUR-PARALLAX-CLASS-HERE with the class you choose for your Containers.

[Frans]

Thanks Tom, but maybe I use this script in the wrong way: it does not work.

I added the script in a GPP Element as hook: tried wp_head, wp_footer
Changed YOUR-PARALLAX-CLASS-HERE in the script
Went to the container (on a page), added my parallax class in the CSS Classes or Element ID
Tried div and section in the Element Tag box
Added my parallax class to the Extra CSS, but did not know what to add in the class

Thanks !

Frans

[David]

Hi there,

JS should go in the wp_footer hook

Lets say we want to use your-parallax as our class.
This line of the JS becomes this:

your_parallax_element( ".your-parallax" ).forEach( function( el, index, array ) {

Then select the Container Block, go to Advanced -> Additional CSS Class(es) and add: your-parallax

[Frans]

Thanks ! It works fine !

I think my mistake: I didn’t put the <script>..</script> tag in the hook element around the above script. Sorry !

Frans

[David]

Glad to hear you found the issue!

[Rafał]

Hi there!
How could it work??
Where hero.parallax comes from in the code?

[David]

Hi there,

can you explain the issue you’re having ?

[Rafał]

Hi David,
Tom’s JS doesn’t work for me.
I wonder what’s going on the line:
el.style.backgroundPositionY = ( scrolledHeight - el.offsetTop ) / hero.parallax + "px";
hero.parallax
??

[Tom]

Ah, try replacing hero.parallax with a number like 2. That should fix it.

[Rafał]

Thanks, Tom!
I haven’t figured out it’s just a placeholder for “speed” factor 😉
But, there’s still some issue: it does not start changing background position until element touches the top edge of the screen.

Added var viewportHeight = $(window).height();
then
if ( scrolledHeight > el.offsetTop - viewportHeight && scrolledHeight <= limit )
allows to start effect while element appears on the screen.

[Rafał]

I’ve tried to deal with similar effect on an image, taking advantage of object-fit: cover;, and object-position property, setting percentage values for Y axis.
Example HTML:

<figure class="wp-block-image size-full PARALLAX-CLASS-HERE">
  <img …/>…
</figure>

My code (with logic from Goran Mottram / Stackoverflow):

(function($) {
    $(window).scroll(function() {      
      setParalax( $('.PARALLAX-CLASS-HERE') );
    });
	
    function setParalax( elements ) {
		
      elements.each(function(i, element) {
      
      var scrollTop = $(window).scrollTop();
      var viewportHeight = $(window).height();
      var elementHeight = $(this).height();
      var offsetTop = $(this).offset().top;
      
      var lowerBound = offsetTop - viewportHeight;
      var upperBound = offsetTop + elementHeight;
      
      var screenScope = (scrollTop - lowerBound) / (upperBound - lowerBound) * 100;
      
      $(element).find('img').css("object-position", "50% " + screenScope + "%");
    });	
  };
})(jQuery);

Working! 🙂
Though I’m not good at JS. Could you improve its logic or performance?

[Tom]

That looks good to me! Performance somewhat goes out the window when it comes to parallax, but at least the code is minimal 🙂

[Author]

Posts