Skip to main content

Monstruosos efectos con HTML, CSS y JS – Las particulas

By 14 noviembre, 2014noviembre 15th, 2016Academia

Hoy hablamos de este código, una mezcla de CSS, HTML y Javascript que os aseguro os va a encantar. Se trata de utilizar un .js creado por el mega-crack Vicent Garreau (http://vincentgarreau.com/). Podéis verlo aquí.
Las particulas (particles) nos permiten recrear una atmósfera única. No queremos entrar en profundidad en el código, dado que no somos programadores, sino designer digitales.

Para reproducir este efecto hace falta unas cuantas cosas…

  1. Un “monstruo” como Vicent que nos permita bajar este código.
  2. El código fuente de las particulas (el CSS y .js) que podemos encontrar aquí en GitHub.
  3. Conocimientos básicos de HTML y CSS.
  4. Y también un poco de paciencia 🙂

Primero nos descargamos los archivos en nuestro escritorio (os aconsejo recrear los archivos, es decir tendremos que crear index.html y rellenarlo con el código copiado desde GitHub y lo mismo para los otros archivos .js y .css).

Así que creamos un archivo “index.html” y creamos dos carpetas: css y js.
Dentro de la carpeta css pondremos el archivo style.css y dentro de la carpeta js pondremos el archivo app.js y particles.js.

Nuestro HTML tendrá una estructura de body como esta:

<body>
<div id=»particles-js»></div>
<script src=»js/particles.js»></script>
<script src=»js/app.js»></script>
</body>

Et voilá!
El resultado final debería ser el siguiente: ver resultado.

Si no sabes nada de HTML y CSS pero te gustaría crear tu página web (a lo mejor con estos efectos) el 21,22 y 28,29 de Noviembre empieza el nuevo Curso de Diseño Web, y como siempre.. ¡plazas limitadas! ¡Quedan solo 4!

Stefano Andreoli

CEO y Creative Director en Estudio Andreoli™. Docente en Monster Academy, HTML.it, IED Madrid y Jurado en Mediastars Festival. Pues.. un poco liado.

Dejar un comentario

El Informe Rojo

Un informe muy interesante escrito por uno de los mejores creativos de España.
Descarga el Informe Rojo con la últimas tendencias  en materia de Marketing y Creatividad.
>> DESCARGA EL INFORME <<
close-link