[Resolved] Can sections already be replaced by GenerateBlocks ?

[Rafał]

So nice 😉
Somewhat universal solution – for image covers, GenerateBlocks with backgrounds, and images with object-fit: cover:

(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;
      if( scrollTop > offsetTop - viewportHeight && scrollTop <= upperBound ) {
        // check if element has css background image defined
        if ($(element).css('background-image') != 'none') {
          $(element).css("background-position", "50% " + screenScope + "%");
        }
        // if not, then find image inside
        $(element).find('img').css("object-position", "50% " + screenScope + "%");
      } else {
        if ($(element).css('background-image') != 'none') {
          $(element).css("background-position", "");
        }
        $(element).find('img').removeAttr("style");
      }
    });  
  };
})(jQuery);

[Frans]

The above solutions together with has worked 2 years in my situation. Now the parallax doesn’t work anymore.

Possible problems:
WP 6.1.1
GenerateBlocks 1.6.0
Smart Slider 3

I read new parallax scripts: are available. I tried to implement, but they don’t work either. If I apply the parallax class to the container, the container moves over the entire webpage: I prefer to have the container fixed on the page, and the parallax effect on the text that is over the container. I applied the parallax class to a heading block, and to an inner (additional) container block: nothing happens.
When I deactivate Smart Slider 3, the parallax applied to the heading (within 2 containers) works, but the text start at the bottom of the containers and moves out of my screen.

So, what is the correct way to implement the new script ?And can it work together with Smart Slider 3 ?

Thanks !

Frans van Ittersum

[Leo]

Can you start a new topic for your question?

This one is quite old already.

Thanks!

[Author]

Posts