[Resolved] Can sections already be replaced by GenerateBlocks ?

Home Forums Support [Resolved] Can sections already be replaced by GenerateBlocks ?

Home Forums Support Can sections already be replaced by GenerateBlocks ?

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1561819
    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

    #1562135
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1563350
    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

    #1564332
    Tom
    Lead Developer
    Lead Developer

    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.

    #1564486
    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

    #1565404
    David
    Staff
    Customer Support

    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

    #1566305
    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

    #1567522
    David
    Staff
    Customer Support

    Glad to hear you found the issue!

    #1631130
    Rafał

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

    #1631254
    David
    Staff
    Customer Support

    Hi there,

    can you explain the issue you’re having ?

    #1631586
    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
    ??

    #1631917
    Tom
    Lead Developer
    Lead Developer

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

    #1632350
    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.

    #1632598
    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?

    #1634500
    Tom
    Lead Developer
    Lead Developer

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

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.