Utilizando una combinación de código HTML, CSS y JavaScript vamos a crear una página web de temática navideña con animaciones. Además, el usuario podrá interactuar haciendo clic en las imágenes.
HTML
- Estructura Básica: El documento HTML comenzará con la declaración
<!DOCTYPE html>y utilizará las etiquetas<html>,<head>, y<body>para estructurar el contenido. - Metadatos: Dentro de
<head>, definiremos el conjunto de caracteres (charset) como ‘utf-8’, y estableceremos la configuración ‘viewport’ para asegurar una correcta visualización en dispositivos móviles. - Título: El título de la página será «Felicitación de Navidad».
- Estilos y Fuentes: Enlazaremos hojas de estilo externas para los estilos CSS y para incluir la fuente «Mountains of Christmas». También incluiremos la librería ‘animate.css‘ para animaciones CSS.
- Contenido del Cuerpo: Dentro de
<body>colocaremos un encabezado<h1>con la frase «¡Feliz Navidad!» y una clase que aplique una animación. A continuación incluiremos undivcon la clase ‘contenedor’ que agrupará tres imágenes con animaciones y eventos de clic asociados. - Elementos de Audio: Incluiremos tres elementos
<audio>para reproducir sonidos para interactuar con las imágenes. - JavaScript: Enlazaremos un fichero externo llamado ‘script.js’ que contendrá todo el código JavaScript.
CSS
- Estilos generales: Estableceremos estilos para
htmlybody, incluyendo márgenes, padding, ancho, fuentes de letra, alineación del texto, color, color de fondo, tamaño de fuente y sombra de texto. - Distribución del contenido: Definiremos un layout de tipo flexbox, con un alineamiento central y una disposición en fila por defecto.
- Media query: Cambiaremos la disposición a columna cuando el ancho de la pantalla sea menor de una resolución específica, lo que mejorará la visualización en dispositivos móviles.
- Estilo de imágenes: Definiremos la anchura en píxeles, y el máximo ancho relativo a la vista y un filtro de sombra para todas las imágenes.
JavaScript
Desarrollaremos una función que se ejecute al hacer clic en las imágenes. Dicha función realizará tres acciones:
- Vibración: Generaremos una breve vibración en dispositivos compatibles.
- Reproducción de audio: Reproduciremos un archivo de audio asociado con la imagen en la que hagamos clic.
- Cambio de imagen y animación: Actualizaremos cada imagen al hacer clic sobre ella y activaremos una nueva animación.
Imágenes y archivos de audio
A continuación mostramos todas las imágenes y los ficheros de audio que vamos a utilizar en nuestra felicitación. También puedes descargar un ZIP con todos los ficheros (incluido el código fuente).
Las imágenes iniciales
Los archivos de audio
Al hacer clic sobre las imágenes (utilizando JavaScript)
Utilizando código JavaScript cambiaremos las imágenes originales por estas otras, cada vez que hagamos clic en una de ellas:
Cómo colocar las imágenes y los audios, y cómo definir las animaciones
Mediante código HTML crearemos la estructura principal de la felicitación. Incluiremos imágenes y elementos de audio, y estableceremos animaciones para captar la atención del usuario.
Para definir las animaciones utilizaremos la librería animate.css. Para ello deberemos enlazarla primero desde nuestro fichero ‘index.html’:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
Una vez enlazada la librería, ya podemos aplicar animaciones a cualquier elemento añadiendo las clases correspondientes, y opcionalmente, un posible retraso para comenzar la animación, que puede ir de 1 a 5 segundos:
<div class="animate__animated animate__lightSpeedInLeft animate__delay-1s"> ... </div>
La combinación de imágenes y audio, junto con las animaciones, proporcionarán finalmente un diseño interactivo para nuestra página de temática navideña:
<h1 class="animate__animated animate__flip">¡Feliz Navidad!</h1>
<div class="contenedor">
<div class="animate__animated animate__lightSpeedInLeft animate__delay-1s">
<div id="img-trineo">
<img src="img/santa-claus.png" alt="Santa Claus">
</div>
<audio id="audio-trineo" src="audio/santa-claus.mp3" controls></audio>
</div>
<div class="animate__animated animate__backInDown animate__delay-2s">
<div id="img-campana">
<img src="img/bola-nieve.png" alt="Bola de nieve">
</div>
<audio id="audio-campana" src="audio/campana.mp3" controls></audio>
</div>
<div class="animate__animated animate__lightSpeedInRight animate__delay-3s">
<div id="img-cantando">
<img src="img/amigos.png" alt="Amigos">
</div>
<audio id="audio-cantando" src="audio/musica-fondo.mp3" controls></audio>
</div>
</div>
- Encabezado
<h1>:<h1 class="animate__animated animate__flip">¡Feliz Navidad!</h1>: Este es un encabezado de nivel 1, utilizado generalmente para el título más importante en la página. Hemos añadido dos clases de CSS para definir la animación:animate__animated: Esta clase indica que el elemento tendrá una animación aplicada.animate__flip: Específica el tipo de animación, en este caso, un efecto de giro (‘flip’).
- Div contenedor:
<div class="contenedor">: Estedivactúa como un contenedor para agrupar los elementos relacionados. La clase ‘contenedor’ se usa para agrupos los elementos de imagen y audio.
- Bloques con imágenes y audio:
- Cada uno de los tres divs internos representa una sección con una imagen y un audio. Hemos añadido clases específicas para definir las animaciones y retrasos:
animate__animated: Establece que se va a definir una animación.animate__lightSpeedInLeft,animate__backInDown,animate__lightSpeedInRight: Estas clases definen el tipo de animación. Cada div tiene una animación distinta que describe cómo entra la imagen en la pantalla.animate__delay-1s,animate__delay-2s,animate__delay-3s: Estos retrasos (1s, 2s, 3s) controlan cuándo comienza la animación después de que se carga la página.
- Dentro de cada div, hay un sub-div con un
idúnico (img-trineo,img-campana,img-cantando) que contiene una imagen (<img>):src: Indica la ruta del archivo de imagen.alt: Proporciona un texto alternativo que describe la imagen. Es útil para accesibilidad y en situaciones donde la imagen pudiera no llegar a cargarse.
- Después de cada imagen, colocamos un elemento
<audio>con unidúnico para cada uno:src: El archivo de audio a reproducir.controls: Indica que se deben mostrar controles de reproducción (play, pause, volumen) en la interfaz de usuario.
- Cada uno de los tres divs internos representa una sección con una imagen y un audio. Hemos añadido clases específicas para definir las animaciones y retrasos:
Cómo conseguir una página más interactiva (utilizando JavaScript)
Mediante el atributo ‘onclick’ de las imágenes y el atributo ‘onplay’ de los elementos de audio podemos hacer que nuestra página web sea más interactiva. Si definimos y ejecutamos la correspondiente función JavaScript, podemos actualizar cada imagen sobre la que hagamos clic, y definir a su vez nuevas animaciones, e incluso reproducir al mismo tiempo el audio correspondiente:
<img src="img/santa-claus.png" onclick="anima('trineo', 'shakeX')" alt="Santa Claus">
...
<audio id="audio-trineo" src="audio/santa-claus.mp3" onplay="anima('trineo', 'shakeX')" controls></audio>
El código fuente completo
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Felicitación de Navidad</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mountains+of+Christmas&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
</head>
<body>
<h1 class="animate__animated animate__flip">¡Feliz Navidad!</h1>
<div class="contenedor">
<div class="animate__animated animate__lightSpeedInLeft animate__delay-1s">
<div id="img-trineo">
<img src="img/santa-claus.png" onclick="anima('trineo', 'shakeX')" alt="Santa Claus">
</div>
<audio id="audio-trineo" src="audio/santa-claus.mp3" onplay="anima('trineo', 'shakeX')" controls></audio>
</div>
<div class="animate__animated animate__backInDown animate__delay-2s">
<div id="img-campana">
<img src="img/bola-nieve.png" onclick="anima('campana', 'swing')" alt="Bola de nieve">
</div>
<audio id="audio-campana" src="audio/campana.mp3" onplay="anima('campana', 'swing')" controls></audio>
</div>
<div class="animate__animated animate__lightSpeedInRight animate__delay-3s">
<div id="img-cantando">
<img src="img/amigos.png" onclick="anima('cantando', 'heartBeat')" alt="Amigos">
</div>
<audio id="audio-cantando" src="audio/musica-fondo.mp3" onplay="anima('cantando', 'heartBeat')" controls></audio>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
- Doctype e idioma:
<!DOCTYPE html>indica al navegador que se trata de un documento HTML5.<html lang="es">especifica que el contenido del documento está en español. - Etiqueta
<head>: Contiene metadatos y enlaces a recursos externos.charset="utf-8": asegura que se usen caracteres Unicode, adecuados para muchos idiomas y símbolos.name="viewport" content="width=device-width": hace que el layout sea responsivo al ancho del dispositivo.<link>: para enlazar hojas de estilo externas y la fuente «Mountains of Christmas».animate.min.css: es una librería de animaciones CSS.
- Etiqueta
<body>: Define el contenido principal de la página.<h1>: es el encabezado principal, decorado con animaciones de ‘animate.css’.<div class="contenedor">: es un contenedor para las imágenes. Cada<div>hijo tiene unidúnico y contiene una<img>.- Cada imagen tiene clases para animaciones y un evento
onclickque llama a la función JavaScriptanima(). - Los elementos
<audio>están asociados a cada imagen para reproducir sonidos específicos.
CSS
html, body {
margin: 0px;
padding: 0px;
width: 100%;
font-family: "Mountains of Christmas";
text-align: center;
color: #ae2929;
background-color: #2929ae;
font-size: 150%;
text-shadow: 2px 2px 2px black;
}
.contenedor {
display: flex;
justify-content: center;
flex-direction: row;
}
@media (max-width: 900px) {
.contenedor {
flex-direction: column;
}
}
img, audio {
width: 300px;
max-width: 100vw;
margin: 5px;
filter: drop-shadow(5px 5px 5px black);
}
- Estilos Globales:
margin: 0px; padding: 0px;elimina márgenes y rellenos por defecto.width: 100%;establece el ancho del cuerpo y el HTML al 100% del viewport.font-family,text-align,color,background-color,font-size,text-shadowaplican estilos de texto y fondo.
- Clase
.contenedor:display: flex;activa Flexbox, un método de layout.justify-content: center;centra los elementos hijos horizontalmente.flex-direction: row;coloca los elementos hijos en una fila.
- Media Query:
@media (max-width: 900px)aplica estilos cuando el ancho de la ventana es menor a 900px, cambiandoflex-directionacolumnpara alinear los elementos verticalmente.
- Estilo de Imágenes:
width: 300px;establece un ancho fijo de las imágenes.max-width: 100vw;establece la anchura máxima de las imágenes para asegurar que no se salen de la pantalla.filter: drop-shadow(5px 5px 5px black);añade una sombra a las imágenes.
JavaScript
function anima(dibujo, animacion) {
navigator.vibrate(50);
document.getElementById(`audio-${dibujo}`).currentTime = 0;
document.getElementById(`audio-${dibujo}`).play();
document.getElementById(`img-${dibujo}`).innerHTML =
`<img src="img/${dibujo}.png"
class="animate__animated animate__${animacion}"
onclick="anima('${dibujo}', '${animacion}')">`;
}
- Vibración:
navigator.vibrate(50): hace que el dispositivo vibre durante 50 milisegundos, en el caso de móviles, tabletas, u otros dispositivos compatibles.
- Control de Audio:
document.getElementById(audio-${dibujo}): selecciona el elemento de audio correspondiente al dibujo sobre el que hemos hecho clic..currentTime = 0: para que el audio comience a reproducirse desde el principio..play(): inicia la reproducción del audio.
- Actualización de Imagen y Animación:
document.getElementById(img-${dibujo}).innerHTML = ...: actualiza el contenido HTML del div que contiene la imagen sobre la que hemos hecho clic. El nuevo contenido es una imagen con una animación específica.onclick="anima('${dibujo}', '${animacion}')": asegura que al hacer clic en la nueva imagen, se vuelva a llamar aanima()con los mismos parámetros.
El resultado
Puedes comprobar aquí el resultado final al completar esta felicitación de Navidad. También puedes descargar aquí un fichero ZIP con todo el código fuente, imágenes y ficheros de audio.