Navegando por internet a veces nos encontramos páginas que tienen alguna animación que nos llama la atención, pero como no mencionan el origen del código ni como hacerla tenemos que encontrar la forma imitar ese trabajo. En mi caso hoy me he encontrado con esto, es como una especie de fuego fatuo que sigue al ratón.
dasdasdasdas
A veces cuando las páginas tienen elementos interesantes podemos ver que son creaciones de su agencia de diseño, así que suelo empezar mirando quien la ha creado para ver si hay más trabajos interesantes. Eso me pasó por ejemplo con la web www.eternalcylinder.com, su estética y animaciones me parecieron interesantes y cuando ví quienes la había hecho, se notaba que había talento. Por desgracia no todas las páginas publican esa información. 🙁
Así que he tenido que churrármelo y buscar en su código, para eso con Ctrl+S me he descargado su página. Entonces he abierto el HTML a ver si se ha descargado bien y sigue funcionando, ya que hay páginas que cuando las descargamos se rompen y no hay por donde analizarlas correctamente. En este caso he tenido suerte y ha seguido funcionando en localhost. Cuando descargamos una página tenemos el HTML y una carpeta con el resto de ficheros necesarios: imágenes, CSS y JavaScript.
Primero he empezado analizando el código CSS, pero solo el relacionado con esa animación, así que he eliminado todos los archivos que no afectasen a esta parte de la página. Muchas veces el CSS viene comprimido, así es imposible analizarlo, pero es muy fácil descomprimirlo, lo he hecho en esta página: www.unminify2.com.
Resulta que el CSS no tenía nada que ver con la animación estaba totalmente programada con JavaScript. Así que he hecho el mismo proceso de eliminar todos los archivos que no rompan la animación. Al final solo me han quedado: fluid.js.descarga, styles-min.css y una carpeta llamada fuera en la que he metido todo lo que no me vale. Al abrir el archivo me he encontrado con el copyright
Copyright (c) 2017 Pavel Dobryakov
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files
(the "Software"), to deal in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Lo más interesante es el nombre del autor, haciendo unas cuantas búsquedas en internet puede que me encuentre su proyecto.
¡Y así ha sido!