Estoy usando el control deslizante de partículas de Particleslider.com y tengo todo instalado correctamente que yo sepa. Sin embargo, cuando está en mi página de inicio, parece que no puedo agregar un enlace para navegar a una página diferente. Cuando agrego el texto sobre el código de partículas inicial, simplemente empuja la sección de partículas hacia abajo. Lo necesito centrado con la sección de partículas.
Además, el control deslizante de partículas tiene el efecto de clic del mouse, eliminando la capacidad de hacer clic en los enlaces, ya que simplemente anima las partículas. ¿Alguna idea de cómo crear un enlace de texto dentro del JS para navegar a otra página?
Aquí está el 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);y aquí está el HTML (estoy eliminando el enlace de la imagen para ahorrar espacio):
<!-- 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>