• Cuarzo.dev
  • Posts
  • ANIMACIONES sin JavaScript!! ni CSS!! incluso sin Imágenes!!? ¡Solo HTML Puro!

ANIMACIONES sin JavaScript!! ni CSS!! incluso sin Imágenes!!? ¡Solo HTML Puro!

Descubre cómo crear animaciones únicamente con HTML, sin necesidad de CSS o JavaScript

Author

Kiko Palomares
May 10, 2021 • Lo lees en: 3 minutos

¿Es posible crear animaciones solo con HTML? Aunque parezca un desafío a las convenciones del desarrollo web, sí es posible, y en este artículo te mostraremos cómo hacerlo. Este enfoque puede ser útil para entender los límites y capacidades del HTML puro y cómo se pueden manipular los elementos de una manera creativa y única.

Desarrollo de la Animación con HTML Puro

Explorando el Concepto

La idea de crear animaciones sin JavaScript, CSS, o imágenes, utilizando únicamente HTML, puede sonar sorprendente. La clave está en la manipulación de la navegación entre diferentes páginas HTML que actúan como "frames" de una animación.

Creación de Frames HTML

Para empezar, necesitas preparar varios archivos HTML, cada uno representando un frame de tu animación. Utiliza la etiqueta <pre> para asegurar que el contenido se muestre exactamente como lo escribes, respetando espacios y líneas.

Automatizando la Transición entre Frames

Para simular el movimiento, utiliza la etiqueta meta con el atributo refresh para redirigir automáticamente de un documento HTML a otro. Por ejemplo, si tienes frame1.html, incluirías en el <head>: 

<meta http-equiv="refresh" content="0; URL='frame2.html'">

Este código configura la página para que se refresque y cargue frame2.html inmediatamente.

Ciclo Continuo de la Animación

Para mantener la animación en bucle, el último frame debe redirigir de nuevo al primero. Esto crea un ciclo que se repite, dando la ilusión de una animación continua.

Visualización y Pruebas

Puedes ver tu animación abriendo el primer frame en un navegador y observando cómo se ejecuta el ciclo de redirección entre los diferentes frames, imitando una secuencia animada.

Conclusiones y Posibilidades Creativas

Este método es una demostración fascinante de cómo se pueden emplear las características estándar de HTML de formas inesperadas. Aunque no reemplaza las técnicas modernas de animación con CSS y JavaScript, proporciona una perspectiva interesante sobre la flexibilidad y el potencial del HTML.

FAQs

  1. ¿Esta técnica de animación es práctica para uso profesional?
    No es práctica para producciones profesionales, pero es excelente para experimentos y aprendizaje.

  2. ¿Pueden estos "frames" HTML contener otros elementos o solo texto?
    Puedes incluir cualquier contenido que el HTML soporte dentro de estos frames, aunque el manejo será estático.

  3. ¿Cuál es la limitación principal de esta técnica?
    La principal limitación es la falta de interactividad y la dependencia de múltiples archivos HTML, lo que puede complicar el mantenimiento.

Este enfoque creativo no solo destaca las capacidades únicas del HTML, sino que también te invita a pensar fuera de la caja y explorar nuevas formas de utilizar tecnologías web estándar. Déjanos tus comentarios abajo sobre esta curiosa técnica, y si te ha inspirado a intentar algo nuevo, ¡compártelo con nosotros!

Suscríbete a nuestra newsletter para seguir aprendiendo cosas nuevas de desarrollo cada día, ¡es gratis!

Reply

or to participate.