Question

0

114

Views

Adding text within Particle Slider javascript

I am using the Particle Slider from Particleslider.com and I have everything installed correctly to my knowledge. However, when it is on my homepage, I cannot seem to add a link to navigate to a different page. When I add the text above the initial particle code, it simply pushes the particle section down. I am needing it centered with the particle section.

Also, the Particle Slider has the mouse click effect, removing the ability to click links as it simply animates the particles. Any idea how to finagle a text link within the JS to navigate to another page?

Here's the JS:

var init = function(){
  var isMobile = navigator.userAgent &&
    navigator.userAgent.toLowerCase().indexOf('mobile') >= 0;
  var isSmall = window.innerWidth < 1000;
  
  var ps = new ParticleSlider({
    ptlGap: isMobile || isSmall ? 3 : 0,
    ptlSize: isMobile || isSmall ? 3 : 1,
    width: 1e9,
    height: 1e9
  });
    

  
  (window.addEventListener
   ? window.addEventListener('click', function(){ps.init(true)}, false)
   : window.onclick = function(){ps.init(true)});
}

var initParticleSlider = function(){
  var psScript = document.createElement('script');
  (psScript.addEventListener
    ? psScript.addEventListener('load', init, false)
    : psScript.onload = init);
  psScript.src = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/23500/ps-0.9.js';
    psScript.setAttribute('type', 'text/javascript');
  document.body.appendChild(psScript);
}
    
(window.addEventListener
  ? window.addEventListener('load', initParticleSlider, false)
  : window.onload = initParticleSlider);

and here is the HTML (I'm removing the image link to conserve space):

<!-- partial:index.partial.html -->
<html>
  <head>
    <meta name="viewport" content="width=device-width" />
    <title>ParticleSlider</title>
  </head>

  <body id="particle-slider">

      <div class="slides">

                                                    

          
        <div id="first-slide" class="slide" data-src="data:image/png;base64,imagelink" alt="" 
             
             
             /> 
          

          
        </div>
        </div>
        <canvas class="draw"></canvas>           

  </body>
    
</html>
<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js'></script><script  src="./script.js"></script>

about 4 years ago · Juan Pablo Isaza

Answer question

0

114

Adding text within Particle Slider javascript

Find remote jobs

Andres GPT