pause and resume methods about rellax HOT 11 OPEN

@Glumanda99 I ended up manipulating the speed attribute. It's not the cleanest way to do it, but it does work.

  // Init Rellax.js after all elements have fully loaded so that all heights of DOMs are calculated
  window.onload = function() {
    var rellax = new Rellax('.rellax', {
      center: true
    });
    // 'Disable' rellax on mobile
    function checkWidth() {
      var windowSize = $(window).innerWidth();
      if (windowSize <= 960) {
        $('.rellax').attr('data-rellax-speed', '0');
        rellax.refresh();
      } else {
        rellax.refresh();
        $('.even.rellax').attr('data-rellax-speed', '-1');
        $('.odd.rellax').attr('data-rellax-speed', '1');
      }
    }
    // Execute on load
    checkWidth();
    // Refresh whenever window is resized.
    $(window).resize(function() {
      checkWidth();
    });
  };

from rellax.

I agree!

Right now I destroy the rellax element on smaller viewports and it'd be great to have a vanilla way of recreating the rellax when the browser viewport sizes back up.

I've tried a few things, but binding new Rellax('.rellax', {}); to a $(window).resize function causes it to keep creating instances every time the viewport is resized, pushing my elements up and down the page more and more as you resize.

from rellax.

@c0mrx May I know why you destroy rellax on smaller viewports?

from rellax.

@Glumanda99 The elements were moving too much and covering more important information, so for UX reasons I've disabled it on smaller screens.

from rellax.

@c0mrx Thanks for your fast response! I'm not sure if I'm gonna have the same issues while designing, but I could imagine to remove the rellax class on smaller viewports and add them back on all data-rellax attributes when appropriate. Need to try this..

from rellax.

I think I also need to reset translate3d every time I do this.

from rellax.

@c0mrx, in your code example above you are calling rellax.refresh(), is that a custom method you've written? I need to refresh the rellax after an AJAX-call that adds content, but destroying and re-initializing it is not working that good[1].

[1] - #91

from rellax.

@captainfromspace I believe it may be in one of the forks of this plugin. Either way, the function was added before line 284 of the plugin and is as follows:

self.refresh = function() {
      self.destroy();
      screenY = window.innerHeight;
      blocks = [];
      cacheBlocks();
      animate();
      pause = false;
    };

from rellax.

I'm trying to use Rellax with the OnScreen. This is mainly required to achieve acceptable page performance. Therefore, I want to pause/suspend all rellax instances except for those that are visible in the viewport.

Unfortunately, I couldn't achieve this without copying rellax src code and patching it.

My recommendation is implementing two methods: attach() and detach(). All it should do is:

1. Stop requestAnimationFrame loop;
2. Detach window.onresize handler;

All this should be done WITHOUT reverting initial element styles. Otherwise it'll all jump-flicker.

In my implementation it's as simple as:

`Rellax.prototype.attach = function() {
if (this.pause) {
this.pause = false;
window.addEventListener('resize', this.initHandler);
this.update();
}
};

Rellax.prototype.detach = function() {
if (!this.pause) {
window.removeEventListener('resize', this.initHandler);
window.cancelAnimationFrame(this.loopId);
this.pause = true;
this.loopId = null;
}
};`

from rellax.

Here's what I've used to make it run responsively:

const getRellaxSpeed = () => $window.width() < 768 ? 0 : -7;
const rellax = new Rellax('.rellax', {
    speed: getRellaxSpeed(),
});

let throttle = null;

$window.resize(() => {
    clearTimeout(throttle);

    throttle = setTimeout(() => {
        rellax.options.speed = getRellaxSpeed();
        rellax.refresh();
    }, 400);
});

(The throttle thing is not necessary, but you get the idea)

from rellax.

Here's what I've used to make it run responsively:

Yeah, that looks good for your goals. In my situation, however, I need to reduce the use of animation frames. Otherwise it makes smooth scrolling jerky. So, I still need detach/attach. Preferrably, persisting Rellax instance.

from rellax.