[Resolved] Can sections already be replaced by GenerateBlocks ?

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 🙂

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.

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

Glad to hear you found the issue!

Hi there,

can you explain the issue you’re having ?

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

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?