Script de Bienvenida Dinámica: Saludos por Hora del Día -

Script de Bienvenida Dinámica: Saludos por Hora del Día.

Script de Bienvenida Dinámica: Saludos por Hora del Día. Cómo Crear un Mensaje de Bienvenida Dinámico con JavaScript y CSS

Presentación del Script de Bienvenida Dinámica

Este script es una solución simple pero efectiva para hacer que la primera impresión de tu página web sea más personal y atractiva. Utiliza JavaScript para mostrar un mensaje de bienvenida que cambia automáticamente según la hora del día del dispositivo del usuario (mañana, tarde o noche).

Lo que hace especial a este script es que no solo cambia el texto, sino que también aplica estilos CSS diferentes para cada momento del día. Esto te permite crear una experiencia visual única, adaptando el color, la fuente y otros elementos de diseño para que coincidan con la atmósfera de la mañana, la tarde o la noche.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bienvenido</title>

    <style>
        #mensaje-bienvenida {
            /* Estilos básicos para el contenedor del mensaje */
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            font-family: 'Arial', sans-serif;
            font-size: 24px;
            font-weight: bold;
            color: #fff;
            transition: background-color 0.5s ease;
        }

        /* Estilos específicos para la mañana */
        .manana {
            background-color: #ffcc80;
            color: #4a4a4a;
        }

        /* Estilos específicos para la tarde */
        .tarde {
            background-color: #ffd166;
            color: #333;
        }

        /* Estilos específicos para la noche */
        .noche {
            background-color: #334e68;
            color: #e0e0e0;
        }
    </style>

    <script>
        // Espera a que el documento esté completamente cargado
        document.addEventListener("DOMContentLoaded", function() {
            // Obtener la hora actual del dispositivo del usuario
            const ahora = new Date();
            const hora = ahora.getHours();

            // Seleccionar el elemento HTML donde se mostrará el mensaje
            const contenedorMensaje = document.getElementById('mensaje-bienvenida');

            // Si por alguna razón el elemento no existe, salimos
            if (!contenedorMensaje) {
                console.error("El elemento con id 'mensaje-bienvenida' no se encontró.");
                return;
            }

            // Definir el mensaje según la hora del día
            let mensaje;
            let claseTiempo;

            if (hora >= 5 && hora < 12) {
                mensaje = "¡Buenos días! Que tengas un excelente día.";
                claseTiempo = "manana";
            } else if (hora >= 12 && hora < 19) {
                mensaje = "¡Buenas tardes! ¿Cómo va tu día?";
                claseTiempo = "tarde";
            } else {
                mensaje = "¡Buenas noches! Es hora de relajarse.";
                claseTiempo = "noche";
            }

            // Asignar el mensaje y la clase CSS al elemento
            contenedorMensaje.textContent = mensaje;
            contenedorMensaje.classList.add(claseTiempo);
        });
    </script>
</head>
<body>

    <div id="mensaje-bienvenida"></div>

</body>
</html>

Instrucciones de Uso

Para implementar este script en tu página web, sigue estos sencillos pasos:

Copia y pega todo el código completo en un único archivo con extensión .html.
Abre este archivo en tu navegador para ver el resultado.

Este código ya incluye el HTML, el CSS y el JavaScript necesarios para que funcione de inmediato.

Personalización

Puedes modificar fácilmente el script y los estilos para que se adapten a la estética de tu página. Aquí te mostramos cómo:

1. Cambiar los Mensajes de Bienvenida

Si quieres que los mensajes sean diferentes, localiza el siguiente bloque de código en la sección <script>:

JavaScript

if (hora >= 5 && hora < 12) {
    mensaje = "¡Buenos días! Que tengas un excelente día."; // Cambia este texto
    claseTiempo = "manana";
} else if (hora >= 12 && hora < 19) {
    mensaje = "¡Buenas tardes! ¿Cómo va tu día?"; // Cambia este texto
    claseTiempo = "tarde";
} else {
    mensaje = "¡Buenas noches! Es hora de relajarse."; // Cambia este texto
    claseTiempo = "noche";
}

Simplemente edita el texto entre comillas ("...") para cada franja horaria.

2. Modificar las Franjas Horarias

Las horas en el script están establecidas en un formato de 24 horas. Puedes ajustar los rangos según tus preferencias:

JavaScript

// La mañana va de las 5 a las 11
if (hora >= 5 && hora < 12) {
    // ...
}
// La tarde va de las 12 a las 18
else if (hora >= 12 && hora < 19) {
    // ...
}
// La noche va de las 19 a las 4
else {
    // ...
}

hora >= 5 && hora < 12: Esto significa "si la hora es mayor o igual a 5 Y menor que 12".
hora >= 12 && hora < 19: Esto significa "si la hora es mayor o igual a 12 Y menor que 19".

Puedes cambiar estos números para definir exactamente cuándo empieza y termina cada período.

3. Personalizar los Estilos (CSS)

Para modificar la apariencia del mensaje, busca el bloque <style> en la sección <head>:

Estilos globales: El selector #mensaje-bienvenida controla los estilos que se aplican a todas las horas del día. Aquí puedes cambiar la fuente (font-family), el tamaño de la fuente (font-size), el relleno (padding) y otros elementos que quieres que sean constantes.
Estilos específicos por hora: Las clases .manana, .tarde y .noche te permiten personalizar los estilos para cada franja horaria. Puedes modificar el color de fondo (background-color) y el color del texto (color) para cada una.

Por ejemplo, si quieres un color de fondo diferente para la mañana, simplemente cambia el valor de background-color en la clase .manana:

CSS

.manana {
    background-color: #e6f7ff; /* Un azul claro */
    color: #004d66; /* Un color de texto oscuro */
}

Guía de Personalización CSS

Puedes modificar cada una de estas propiedades para que el mensaje se adapte perfectamente al diseño de tu sitio web.

padding: 20px;

Función: Controla el espacio interno alrededor del texto. Un valor mayor creará más espacio entre el texto y los bordes del contenedor, mientras que un valor menor lo hará más ajustado.

Cómo personalizarlo: Puedes usar un solo valor (20px) para los cuatro lados, o especificar cada lado por separado:

padding: 10px 20px; (10px arriba y abajo, 20px a los lados)

padding: 15px 30px 15px 30px; (arriba, derecha, abajo, izquierda)

¡Con estas opciones, puedes adaptar completamente el script a la identidad visual de tu sitio web!

border-radius: 10px;

Función: Define el radio de las esquinas del contenedor, dándole un aspecto redondeado.

Cómo personalizarlo: Un valor de 0px creará esquinas cuadradas. Un valor mayor como 20px o 30px hará las esquinas más redondeadas. Puedes incluso usar 50% para crear un contenedor con forma de pastilla, si el ancho y el alto son adecuados.

text-align: center;

Función: Alinea el texto dentro del contenedor.

Cómo personalizarlo: Puedes cambiarlo a left (izquierda) o right (derecha) si prefieres que el texto no esté centrado.

font-family: 'Arial', sans-serif;

Función: Establece el tipo de fuente para el texto.

Cómo personalizarlo: Reemplaza 'Arial' con la fuente que desees, como 'Verdana', 'Helvetica', o incluso una fuente de Google Fonts. Asegúrate de siempre incluir una fuente genérica (sans-serif, serif, monospace) como respaldo.

font-size: 24px;

Función: Controla el tamaño del texto.

Cómo personalizarlo: Aumenta o disminuye el valor en píxeles (px) para hacer el texto más grande o más pequeño. También puedes usar unidades relativas como em o rem si prefieres un tamaño que se adapte al tamaño de la fuente base de la página.

font-weight: bold;

Función: Define el grosor de la fuente.

Cómo personalizarlo: Cámbialo a normal para que el texto sea más delgado, o usa valores numéricos como 400 (normal) o 700 (negrita).

color: #2D2D2D;

Función: Establece el color del texto.

Cómo personalizarlo: Reemplaza #2D2D2D con cualquier código de color que desees. Puedes usar nombres de colores en inglés (blue, red), códigos hexadecimales (#FF5733) o valores RGB (rgb(255, 87, 51)).

transition: background-color 0.5s ease;

Función: Hace que los cambios de color de fondo sean suaves y animados, en lugar de instantáneos.

Cómo personalizarlo:

0.5s controla la duración de la transición. Puedes hacerlo más rápido (0.2s) o más lento (1s).

ease es la curva de velocidad de la animación. Otras opciones son linear, ease-in o ease-out.

Ejemplo de como se vería el Script de Bienvenida Dinámicacon la configuración actual

Bienvenido

👉 Más herramientas de Utilidades Web

Comparte esta información:

WhatsApp X (Twitter) Facebook Email Telegram