JavaScript - page has to be refreshed to show particle-slider logo effect

Question

I\'m loading a front-end site from Wordpress using a HTML 5 Blank Child Theme. I have a logo effect using particle slider for when I have a screen size of >960px; for screen

Answer 1

Your use case has two major issues:

• When you init the Particles before the target is visible the image has an invalid size (0x0)
• Once the Animation is running and you make the resolution smaller the animation keeps running in the background

I tried to handle both issues in the following script.

var ps = null

function init(){
  var isVisible = window.innerWidth >= 960;
  if (!ps && isVisible) {
    // create and init
    ps = new ParticleSlider({
      ptlGap: 1,
      ptlSize: 1,
      width: 1e9,
      height: 100,
    });

    ps.init(false);
  } else if (ps && !isVisible) {
    // stop and remove
    ps.requestAnimationFrame = function() {}; // Stop render loop
    ps = null;
  }
}

window.addEventListener('load', init, false)
window.onload = init;
window.addEventListener('resize', init, false);
window.onresize = init;

html, body {
  background-color: black;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  color: #fff;
  text-align: center;
}

.slides, & > .dg {
  display: none;
}

.low-res {
  display: none;
}

@media screen and (max-width: 959px) {
  .draw {
    display: none;
  }

  .low-res {
    display: inline;
    width: 50%;
  }
}