Script de Efecto FOMO (Fear Of Missing Out) -

Descripción del script Script de Efecto FOMO

Script de Efecto FOMO. Este script de JavaScript tiene como objetivo generar un efecto FOMO (miedo a perderse algo) en la página web, mostrando notificaciones emergentes en tiempo real. La funcionalidad simula compras recientes de usuarios, lo que aumenta la percepción de demanda y urgencia, incentivando a otros visitantes a realizar una compra.

El script crea dinámicamente notificaciones con nombres, ciudades y productos aleatorios, las muestra con una transición suave y las oculta automáticamente después de unos segundos, generando un flujo constante de actividad que ayuda a captar la atención del cliente.»

En la parte inferior izquierda de esta página puedes ver un ejemplo del resultado

Opción 1: Código todo en uno (Para principiantes)

Esta opción es perfecta si quieres una implementación rápida. Simplemente copia todo el código y pégalo en un solo archivo .html.

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo de efecto FOMO</title>
    <style>
        /* Estilos CSS para la notificación */
        .fomo-notification {
            position: fixed;
            bottom: 20px;
            right: 20px; /* Puedes cambiar a 'left: 20px;' para moverla de lado */
            background-color: rgba(0, 0, 0, 0.8);
            color: #fff;
            padding: 15px 20px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            z-index: 1000;
            opacity: 0;
            transform: translateY(100%);
            transition: all 0.5s ease-in-out;
            font-family: Arial, sans-serif;
            max-width: 300px;
            font-size: 14px;
        }

        .fomo-notification.show {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>
<body>

    <h1>Bienvenido a nuestra tienda</h1>
    <p>Este es un ejemplo de cómo se verá el efecto FOMO en tu página web.</p>
    <script>
        // Script JavaScript para el efecto FOMO
        const names = ['Ana', 'Luis', 'Sofía', 'Carlos', 'María', 'Pedro', 'Laura', 'Javier'];
        const cities = ['Madrid', 'Barcelona', 'Sevilla', 'Valencia', 'Bilbao', 'Málaga', 'Zaragoza', 'Murcia'];
        const products = ['Smartphone XYZ', 'Laptop Pro', 'Auriculares Bluetooth', 'Smartwatch', 'Cámara DSLR', 'Altavoz inteligente', 'Tablet E10', 'Bicicleta de montaña'];

        function getRandomItem(arr) {
            return arr[Math.floor(Math.random() * arr.length)];
        }

        function showNotification() {
            const randomName = getRandomItem(names);
            const randomCity = getRandomItem(cities);
            const randomProduct = getRandomItem(products);

            const notification = document.createElement('div');
            notification.classList.add('fomo-notification');
            notification.innerHTML = `
                <p><b>${randomName}</b> de <b>${randomCity}</b> acaba de comprar <b>${randomProduct}</b></p>
            `;

            document.body.appendChild(notification);

            // Mostrar la notificación
            setTimeout(() => {
                notification.classList.add('show');
            }, 100);

            // Ocultar y eliminar la notificación
            setTimeout(() => {
                notification.classList.remove('show');
                notification.addEventListener('transitionend', () => {
                    notification.remove();
                });
            }, 5000); // La notificación dura 5 segundos
        }

        // Inicia el ciclo de notificaciones
        setInterval(showNotification, 10000); // Una nueva notificación cada 10 segundos
    </script>

</body>
</html>

Descripción y uso de la opción 1:

Descripción del script: Este código HTML incluye todo lo necesario para funcionar en un solo archivo. La sección <style> contiene las reglas CSS para darle apariencia a las notificaciones (posición, colores, animaciones, etc.). La sección <script> genera notificaciones de forma aleatoria. Define listas de nombres, ciudades y productos, elige uno de cada uno y crea una ventana emergente que aparece en la esquina inferior derecha de la pantalla. La notificación se muestra durante 5 segundos y luego desaparece, creando un ciclo continuo.
Instrucciones de uso:
1. Copia todo el código que se encuentra arriba.
2. Pega el código en un editor de texto (como Notepad, Visual Studio Code o Sublime Text).
3. Guarda el archivo con la extensión .html (por ejemplo: index.html).
4. Abre el archivo en tu navegador para ver el efecto en acción.
5. Para integrarlo en tu página web, simplemente copia el código y pégalo en tu archivo HTML. Puedes modificar los estilos y el contenido de las listas para personalizarlo a tu gusto.

Opción 2: Código organizado (HTML, CSS y JavaScript separados)

Esta es la mejor opción si quieres una estructura web más limpia y profesional. Facilita la edición y el mantenimiento del código.

1. Archivo index.html:

HTML

<h1>Hola, Mundo!</h1>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo de efecto FOMO</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <h1>Bienvenido a nuestra tienda</h1>
    <p>Este es un ejemplo de cómo se verá el efecto FOMO en tu página web.</p>
    <script src="script.js"></script>
</body>
</html>

2. Archivo styles.css:

CSS

/* Estilos CSS para la notificación */
.fomo-notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    opacity: 0;
    transform: translateY(100%);
    transition: all 0.5s ease-in-out;
    font-family: Arial, sans-serif;
    max-width: 300px;
    font-size: 14px;
}

.fomo-notification.show {
    opacity: 1;
    transform: translateY(0);
}

3. Archivo script.js:

JavaScript

// Script JavaScript para el efecto FOMO
const names = [‘Ana’, ‘Luis’, ‘Sofía’, ‘Carlos’, ‘María’, ‘Pedro’, ‘Laura’, ‘Javier’];
const cities = [‘Madrid’, ‘Barcelona’, ‘Sevilla’, ‘Valencia’, ‘Bilbao’, ‘Málaga’, ‘Zaragoza’, ‘Murcia’];
const products = [‘Smartphone XYZ’, ‘Laptop Pro’, ‘Auriculares Bluetooth’, ‘Smartwatch’, ‘Cámara DSLR’, ‘Altavoz inteligente’, ‘Tablet E10’, ‘Bicicleta de montaña’];

function getRandomItem(arr) {
    return arr[Math.floor(Math.random() * arr.length)];
}

function showNotification() {
    const randomName = getRandomItem(names);
    const randomCity = getRandomItem(cities);
    const randomProduct = getRandomItem(products);

    const notification = document.createElement(‘div’);
    notification.classList.add(‘fomo-notification’);
    notification.innerHTML = `
        <p><b>${randomName}</b> de <b>${randomCity}</b> acaba de comprar <b>${randomProduct}</b></p>
    `;

    document.body.appendChild(notification);

    // Mostrar la notificación
    setTimeout(() => {
        notification.classList.add(‘show’);
    }, 100);

    // Ocultar y eliminar la notificación
    setTimeout(() => {
        notification.classList.remove(‘show’);
        notification.addEventListener(‘transitionend’, () => {
            notification.remove();
        });
    }, 5000); // La notificación dura 5 segundos
}

// Inicia el ciclo de notificaciones
setInterval(showNotification, 10000); // Una nueva notificación cada 10 segundos

Descripción y uso de la opción 2:

Descripción del script: Este método divide la funcionalidad en tres archivos separados. El archivo index.html contiene la estructura de la página, vinculando el CSS y el JavaScript a través de etiquetas <link> y <script>. El archivo styles.css se encarga únicamente del aspecto visual de las notificaciones. Finalmente, el archivo script.js contiene la lógica de la generación de notificaciones. Esta separación hace que el código sea más fácil de leer, mantener y modificar.
Instrucciones de uso:
1. Crea una carpeta en tu ordenador para tu proyecto (ej: mi-web).
2. Dentro de esa carpeta, crea tres archivos nuevos: index.html, styles.css y script.js.
3. Copia y pega el código correspondiente en cada uno de los archivos.
4. Guarda los tres archivos.
5. Abre el archivo index.html en tu navegador para ver el efecto.
6. Para subirlo a tu servidor web, simplemente sube los tres archivos a la misma carpeta en tu hosting.

Ambas opciones son completamente funcionales. La primera es ideal para un uso rápido, mientras que la segunda es la forma recomendada de trabajar en proyectos web para mantener todo organizado.

Instrucciones para Personalizar el Script de Efecto FOMO

El script está diseñado para ser flexible. Puedes modificar tanto el contenido de las notificaciones como su apariencia y comportamiento.

1. Personalizar el Contenido de las Notificaciones

Puedes hacer que las notificaciones sean más creíbles y específicas para tu negocio cambiando los datos de las listas.

Nombres (names): Cambia los nombres por otros más comunes en tu región o mercado objetivo

.JavaScript

const names = ['Juan', 'Sofía', 'Daniela', 'Pedro', 'María'];

Consejo: Usa una mezcla de nombres comunes para que parezca más realista.

Ciudades (cities): Reemplaza las ciudades por las de tu país o las zonas geográficas donde más venden tus productos.

JavaScript

const cities = ['Ciudad de México', 'Guadalajara', 'Monterrey', 'Puebla'];

Consejo: Si tu negocio es local, puedes usar nombres de barrios o distritos.

Productos (products): Esta es la parte más importante. Incluye los nombres exactos de los productos que vendes en tu tienda.

JavaScript

const products = ['Camiseta Vintage', 'Pantalón Slim Fit', 'Zapatillas Urbanas', 'Sudadera con Capucha'];

Consejo: Puedes añadir también descripciones breves, como «Camiseta Vintage ‘Rolling Stones'».

2. Personalizar la Apariencia (CSS)

El archivo styles.css (o la etiqueta <style>) controla cómo se ven las notificaciones.

Posición de la Notificación: Para mover la notificación a otra esquina, cambia las propiedades de posición.

Esquina inferior izquierda:

CSS

bottom: 20px; left: 20px;

Esquina inferior derecha:

CSS

bottom: 20px; right: 20px; /* Esta es la configuración actual */

Colores: Cambia el color de fondo (background-color) y el color del texto (color) para que coincidan con la paleta de colores de tu web.

CSS

background-color: #34495e; /* Un tono de azul oscuro */ color: #f1c40f; /* Un tono de amarillo para el texto */

Tamaño y Fuente del Texto: Modifica el tamaño de la fuente (font-size) y el tipo de letra (font-family)

.CSS

font-size: 16px; font-family: 'Helvetica Neue', Arial, sans-serif;

3. Personalizar el Comportamiento (JavaScript)

Puedes ajustar la frecuencia con la que aparecen las notificaciones y cuánto tiempo permanecen en pantalla.

Frecuencia de Aparición: Para cambiar el tiempo entre cada notificación, modifica el valor en setInterval. El valor se mide en milisegundos (1000 ms = 1 segundo).

JavaScript

// Una nueva notificación cada 15 segundos setInterval(showNotification, 15000); // Una nueva notificación cada 5 segundos (más agresivo) setInterval(showNotification, 5000);

Duración de la Notificación: Para cambiar cuánto tiempo está visible la notificación, ajusta el valor en el segundo setTimeout

.JavaScript

// La notificación dura 7 segundos en pantalla setTimeout(() => { // ...código para ocultar }, 7000);

Con estos cambios, podrás hacer que el efecto FOMO sea único para tu sitio web y más creíble para tus visitantes.

Descripción del script Script de Efecto FOMO

Opción 1: Código todo en uno (Para principiantes)

Descripción y uso de la opción 1:

Opción 2: Código organizado (HTML, CSS y JavaScript separados)

Descripción y uso de la opción 2:

Instrucciones para Personalizar el Script de Efecto FOMO

1. Personalizar el Contenido de las Notificaciones

2. Personalizar la Apariencia (CSS)

3. Personalizar el Comportamiento (JavaScript)

En la parte inferior izquierda puedes ver un ejemplo del efecto FOMO.

👉 Más Utilidades Web

Comparte esta información:

PUEDES HABERTE PERDIDO

Cómo el Ejercicio y la Salud Impulsan al Autónomo: Guía Esencial

El Universo del Autónomo en España: Clases y Claves Digitales para el Éxito

La Guía Definitiva de Habilidades Digitales para Autónomos en 2025: De Cero a Héroe Digital

Momento Óptimo para Emprender en España en 2025: Sectores, Ciudades y Entorno Estratégico