Hola, estoy aprendiendo html/css y javascript y creo que tengo un problema con mi estructura html. Básicamente, lo que quiero hacer es que la animación de mis partículas permanezca en el sitio web mientras me desplazo por la página. Tengo un archivo Javascript que hace un getElementById('partículas') para ejecutar el lienzo en un div pero solo permanece en la primera página.
Traté de mover el div de "partículas" como un div principal que contendrá todas las secciones, pero no funcionó.
Aquí está el repositorio de los archivos si alguien está interesado: https://github.com/DanielVillacis/DanielVillacis.github.io
Aquí está mi estructura html:
document.addEventListener('DOMContentLoaded', function() { particleground(document.getElementById('particles'), { dotColor: '#FFFFFF', lineColor: '#FFFFFF' }); var intro = document.getElementById('intro'); intro.style.marginTop = -intro.offsetHeight / 2 + 'px'; }, false); html, body { width: 100%; height: 100vh; } canvas { display: inline-block; vertical-align: baseline; } header, section { display: block; } #particles { width: 100%; height: 100vh; overflow: hidden; position: relative; } .container { scroll-snap-type: y mandatory; overflow-y: scroll; height: 100vh; } section { height: 100vh; width: 100%; display: inline-block; scroll-snap-align: start; } <body> <div class="container"> <main role="main"> <section class="intro"> <div id="particles"> <header class="splash" id="splash" role="banner"> <div id="intro"> </div> </header> </div> </section> <section class="AboutMe"> <div class="introduction"> </div> </section> <section class="box"> <div class="projectContainer"> </div> </section> <section class="Contact"> <h2 class="ContactTitle">Contact</h2> <div class="contactLinks"> </div> </section> </main> </div> </body>Utilice la position: fixed; propiedad.
Con la posición establecida en fijo, su lienzo se coloca en relación con la ventana gráfica y, por lo tanto, permanecerá incluso mientras se desplaza.
.pg-canvas { display: block; position: fixed; top: 0; left: 0; pointer-events: none; width: 100%; height: 100vh; }Ha colocado las partículas (que se muestran en un lienzo) en una sección que se desplazará fuera de la vista.
La biblioteca de partículas que está utilizando coloca este lienzo justo antes del elemento que le ha dado, que tiene partículas de identificación.
Puede arreglar solo el lienzo agregando position: fixed al selector de lienzo en su hoja de estilo (tenga cuidado si tiene otros lienzos para dar un selector más definido).
Esto funcionará en muchos casos para fijar el lienzo con las partículas a la ventana gráfica. Pero tenga en cuenta esta descripción de MDN
El elemento se elimina del flujo de documentos normal y no se crea ningún espacio para el elemento en el diseño de página. Se coloca en relación con el bloque de contención inicial establecido por la ventana gráfica, excepto cuando uno de sus ancestros tiene una propiedad de transformación, perspectiva o filtro establecida en algo diferente a ninguno (consulte la Especificación de transformación CSS), en cuyo caso ese ancestro se comporta como el bloque contenedor. (Tenga en cuenta que existen incoherencias del navegador con la perspectiva y el filtro que contribuyen a contener la formación de bloques). Su posición final está determinada por los valores de arriba, derecha, abajo e izquierda.
Está bien en este momento porque mueve la introducción con la parte superior, pero si eso fuera una traducción, tendría que sacar el lienzo de la introducción.