Centro de Fragmentos de Código
interactive
intermediate
cookie-banner
gdpr
privacy
consent
responsive
modern
animated
Categoría · Interactivo Nivel de Dificultad · Intermedio Publicado el · 15 de enero de 2024

Banner de Consentimiento de Cookies Glassmorphism

Un banner de consentimiento de cookies moderno y elegante con diseño glassmorphism que incluye efectos de vidrio esmerilado, animaciones suaves y diseño responsivo.

#cookie-banner #gdpr #privacy #consent #responsive #modern #animated

Diseño Responsivo

Sí

Soporte para Modo Oscuro

No

líneas

701

Compatibilidad del Navegador

No

Vista Previa en Vivo

Interactúa con el componente sin salir de la página.

400px

Un impresionante banner de consentimiento de cookies con diseño glassmorphism que incluye efectos de vidrio esmerilado, animaciones suaves y estética moderna.

Características

  • 🎨 Hermoso diseño glassmorphism con efecto de vidrio esmerilado
  • 📱 Diseño completamente responsivo
  • ✨ Animación suave de deslizamiento hacia arriba
  • 🎯 Acciones de botones personalizables
  • 🌐 Soporte multiidioma
  • ♿ Características de accesibilidad con etiquetas ARIA
  • 🔧 Fácil de integrar y personalizar
  • 💾 Integración con LocalStorage para preferencias del usuario
  • 🎭 Efecto de desenfoque de fondo
  • 🎪 Animaciones hover y micro-interacciones

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Banner de Cookies Glassmorphism</title>
</head>
<body>
    
    <div class="demo-background">
        <div class="bg-gradient"></div>
        <div class="bg-shapes">
            <div class="shape shape-1"></div>
            <div class="shape shape-2"></div>
            <div class="shape shape-3"></div>
        </div>
    </div>

    
    <div class="main-content">
        <h1>Demo del Banner de Cookies Glassmorphism</h1>
        <p>Esta es una página de demostración para mostrar el hermoso banner de consentimiento de cookies glassmorphism.</p>
        <button class="demo-btn" onclick="showCookieBanner()">Mostrar Banner de Cookies</button>
    </div>

    
    <div id="cookieBanner" class="cookie-banner" role="dialog" aria-labelledby="cookie-title" aria-describedby="cookie-description">
        <div class="cookie-content">
            <div class="cookie-icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="currentColor"/>
                </svg>
            </div>
            <div class="cookie-text">
                <h3 id="cookie-title">Usamos cookies</h3>
                <p id="cookie-description">
                    Utilizamos cookies para mejorar tu experiencia de navegación, servir contenido personalizado y analizar nuestro tráfico. 
                    Al hacer clic en "Aceptar Todo", consientes nuestro uso de cookies.
                </p>
            </div>
            <div class="cookie-actions">
                <button class="btn btn-secondary" onclick="declineCookies()" aria-label="Rechazar cookies">
                    <span>Rechazar</span>
                </button>
                <button class="btn btn-primary" onclick="acceptCookies()" aria-label="Aceptar todas las cookies">
                    <span>Aceptar Todo</span>
                    <div class="btn-shine"></div>
                </button>
            </div>
        </div>
        <button class="cookie-close" onclick="hideCookieBanner()" aria-label="Cerrar banner de cookies">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 4L4 12M4 4l8 8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            </svg>
        </button>
    </div>

    
    <div id="cookieBackdrop" class="cookie-backdrop"></div>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
}.demo-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.bg-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    opacity: 0.9;
}

.bg-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    animation: float 6s ease-in-out infinite;
}

.shape-1 {
    width: 200px;
    height: 200px;
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.shape-2 {
    width: 150px;
    height: 150px;
    top: 60%;
    right: 15%;
    animation-delay: 2s;
}

.shape-3 {
    width: 100px;
    height: 100px;
    bottom: 20%;
    left: 60%;
    animation-delay: 4s;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(180deg);
    }
}.main-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
    text-align: center;
    color: white;
}

.main-content h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    font-weight: 700;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.main-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    opacity: 0.9;
    max-width: 600px;
}

.demo-btn {
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.demo-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}.cookie-banner {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    width: 90%;
    max-width: 500px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 1.5rem;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.cookie-banner.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.cookie-content {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    position: relative;
}

.cookie-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-top: 0.25rem;
}

.cookie-text {
    flex: 1;
    color: white;
}

.cookie-text h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: white;
}

.cookie-text p {
    font-size: 0.9rem;
    line-height: 1.5;
    opacity: 0.9;
    margin-bottom: 1rem;
}

.cookie-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-width: 80px;
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

.btn-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.btn-primary:hover .btn-shine {
    left: 100%;
}

.cookie-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    opacity: 0.7;
}

.cookie-close:hover {
    background: rgba(255, 255, 255, 0.2);
    opacity: 1;
    transform: rotate(90deg);
}

.cookie-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(2px);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.cookie-backdrop.show {
    opacity: 1;
    visibility: visible;
}@media (max-width: 768px) {
    .cookie-banner {
        bottom: 1rem;
        left: 1rem;
        right: 1rem;
        width: auto;
        max-width: none;
        transform: translateY(100px);
        padding: 1.25rem;
    }
    
    .cookie-banner.show {
        transform: translateY(0);
    }
    
    .cookie-content {
        flex-direction: column;
        gap: 1rem;
    }
    
    .cookie-icon {
        align-self: flex-start;
    }
    
    .cookie-actions {
        justify-content: stretch;
    }
    
    .btn {
        flex: 1;
        min-width: auto;
    }
    
    .main-content h1 {
        font-size: 2rem;
    }
    
    .main-content p {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .cookie-actions {
        flex-direction: column;
    }
    
    .btn {
        width: 100%;
    }
}@media (prefers-reduced-motion: reduce) {
    .cookie-banner,
    .btn,
    .cookie-close,
    .shape {
        transition: none;
        animation: none;
    }
}

JavaScript

class GlassmorphismCookieBanner {
    constructor(options = {}) {
        this.options = {
            autoShow: true,
            showDelay: 1000,
            storageKey: 'cookieConsent',
            onAccept: null,
            onDecline: null,
            onClose: null,
            ...options
        };
        
        this.banner = null;
        this.backdrop = null;
        this.isVisible = false;
        
        this.init();
    }
    
    init() {
        this.banner = document.getElementById('cookieBanner');
        this.backdrop = document.getElementById('cookieBackdrop');
        
        if (!this.banner || !this.backdrop) {
            console.error('Elementos del banner de cookies no encontrados');
            return;
        }
        
        this.setupEventListeners();
        this.checkStoredConsent();
        
        if (this.options.autoShow && !this.hasConsent()) {
            setTimeout(() => this.show(), this.options.showDelay);
        }
    }
    
    setupEventListeners() {
        document.addEventListener('keydown', (e) => {
            if (this.isVisible && e.key === 'Escape') {
                this.hide();
            }
        });
        this.backdrop.addEventListener('click', () => {
            this.hide();
        });
        this.banner.addEventListener('keydown', (e) => {
            if (e.key === 'Tab') {
                this.handleTabNavigation(e);
            }
        });
    }
    
    handleTabNavigation(e) {
        const focusableElements = this.banner.querySelectorAll(
            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
        );
        const firstElement = focusableElements[0];
        const lastElement = focusableElements[focusableElements.length - 1];
        
        if (e.shiftKey) {
            if (document.activeElement === firstElement) {
                e.preventDefault();
                lastElement.focus();
            }
        } else {
            if (document.activeElement === lastElement) {
                e.preventDefault();
                firstElement.focus();
            }
        }
    }
    
    show() {
        if (this.isVisible) return;
        
        this.isVisible = true;
        this.backdrop.classList.add('show');
        setTimeout(() => {
            this.banner.classList.add('show');
            this.focusFirstElement();
        }, 100);
        document.body.style.overflow = 'hidden';
    }
    
    hide() {
        if (!this.isVisible) return;
        
        this.isVisible = false;
        this.banner.classList.remove('show');
        
        setTimeout(() => {
            this.backdrop.classList.remove('show');
        }, 200);
        document.body.style.overflow = '';
        
        if (this.options.onClose) {
            this.options.onClose();
        }
    }
    
    accept() {
        this.setConsent(true);
        this.hide();
        
        if (this.options.onAccept) {
            this.options.onAccept();
        }
        
        this.showNotification('¡Cookies aceptadas! Gracias.', 'success');
    }
    
    decline() {
        this.setConsent(false);
        this.hide();
        
        if (this.options.onDecline) {
            this.options.onDecline();
        }
        
        this.showNotification('Preferencias de cookies guardadas.', 'info');
    }
    
    setConsent(accepted) {
        const consent = {
            accepted,
            timestamp: Date.now(),
            version: '1.0'
        };
        
        localStorage.setItem(this.options.storageKey, JSON.stringify(consent));
    }
    
    hasConsent() {
        const stored = localStorage.getItem(this.options.storageKey);
        return stored !== null;
    }
    
    checkStoredConsent() {
        const stored = localStorage.getItem(this.options.storageKey);
        if (stored) {
            try {
                const consent = JSON.parse(stored);
                const oneYear = 365 * 24 * 60 * 60 * 1000;
                if (Date.now() - consent.timestamp > oneYear) {
                    localStorage.removeItem(this.options.storageKey);
                    return false;
                }
                return true;
            } catch (e) {
                localStorage.removeItem(this.options.storageKey);
                return false;
            }
        }
        return false;
    }
    
    focusFirstElement() {
        const firstButton = this.banner.querySelector('button');
        if (firstButton) {
            firstButton.focus();
        }
    }
    
    showNotification(message, type = 'info') {
        const notification = document.createElement('div');
        notification.className = `notification notification-${type}`;
        notification.innerHTML = `
            <div class="notification-content">
                <span>${message}</span>
                <button class="notification-close" onclick="this.parentElement.parentElement.remove()">
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                        <path d="M10.5 3.5L3.5 10.5M3.5 3.5l7 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                    </svg>
                </button>
            </div>
        `;
        const style = document.createElement('style');
        style.textContent = `
            .notification {
                position: fixed;
                top: 2rem;
                right: 2rem;
                background: rgba(255, 255, 255, 0.1);
                backdrop-filter: blur(20px);
                border: 1px solid rgba(255, 255, 255, 0.2);
                border-radius: 12px;
                padding: 1rem;
                color: white;
                z-index: 10000;
                animation: slideInRight 0.3s ease;
                max-width: 300px;
            }
            .notification-content {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 1rem;
            }
            .notification-close {
                background: none;
                border: none;
                color: white;
                cursor: pointer;
                padding: 4px;
                border-radius: 4px;
                opacity: 0.7;
                transition: opacity 0.2s ease;
            }
            .notification-close:hover {
                opacity: 1;
            }
            .notification-success {
                border-color: rgba(34, 197, 94, 0.3);
                background: rgba(34, 197, 94, 0.1);
            }
            .notification-info {
                border-color: rgba(59, 130, 246, 0.3);
                background: rgba(59, 130, 246, 0.1);
            }
            @keyframes slideInRight {
                from {
                    transform: translateX(100%);
                    opacity: 0;
                }
                to {
                    transform: translateX(0);
                    opacity: 1;
                }
            }
            @media (max-width: 768px) {
                .notification {
                    top: 1rem;
                    right: 1rem;
                    left: 1rem;
                    max-width: none;
                }
            }
        `;
        
        if (!document.querySelector('#notification-styles')) {
            style.id = 'notification-styles';
            document.head.appendChild(style);
        }
        
        document.body.appendChild(notification);
        setTimeout(() => {
            if (notification.parentElement) {
                notification.style.animation = 'slideInRight 0.3s ease reverse';
                setTimeout(() => notification.remove(), 300);
            }
        }, 5000);
    }
    reset() {
        localStorage.removeItem(this.options.storageKey);
        this.show();
    }
    
    getConsent() {
        const stored = localStorage.getItem(this.options.storageKey);
        if (stored) {
            try {
                return JSON.parse(stored);
            } catch (e) {
                return null;
            }
        }
        return null;
    }
}
function showCookieBanner() {
    if (window.cookieBanner) {
        window.cookieBanner.show();
    }
}

function acceptCookies() {
    if (window.cookieBanner) {
        window.cookieBanner.accept();
    }
}

function declineCookies() {
    if (window.cookieBanner) {
        window.cookieBanner.decline();
    }
}

function hideCookieBanner() {
    if (window.cookieBanner) {
        window.cookieBanner.hide();
    }
}
document.addEventListener('DOMContentLoaded', () => {
    window.cookieBanner = new GlassmorphismCookieBanner({
        autoShow: false, // Establecer en true para mostrar automáticamente
        onAccept: () => {
            console.log('¡Cookies aceptadas!');
        },
        onDecline: () => {
            console.log('¡Cookies rechazadas!');
        }
    });
});

Uso

Implementación Básica

const cookieBanner = new GlassmorphismCookieBanner();

Configuración Personalizada

const cookieBanner = new GlassmorphismCookieBanner({
    autoShow: true,
    showDelay: 2000,
    storageKey: 'miAppCookieConsent',
    onAccept: () => {
        gtag('consent', 'update', {
            'analytics_storage': 'granted'
        });
    },
    onDecline: () => {
        gtag('consent', 'update', {
            'analytics_storage': 'denied'
        });
    }
});

Control Manual

cookieBanner.show();
cookieBanner.hide();
cookieBanner.reset();
const consent = cookieBanner.getConsent();
console.log(consent); // { accepted: true, timestamp: 1234567890, version: '1.0' }

Métodos de la API

  • show() - Mostrar el banner de cookies
  • hide() - Ocultar el banner de cookies
  • accept() - Aceptar cookies y ocultar banner
  • decline() - Rechazar cookies y ocultar banner
  • reset() - Resetear consentimiento y mostrar banner nuevamente
  • getConsent() - Obtener estado actual del consentimiento
  • hasConsent() - Verificar si el usuario ya ha dado consentimiento

Opciones de Personalización

Configuración

  • autoShow: Mostrar automáticamente el banner al cargar la página
  • showDelay: Retraso antes de mostrar el banner (milisegundos)
  • storageKey: Clave de LocalStorage para almacenar el consentimiento
  • onAccept: Función callback cuando se aceptan las cookies
  • onDecline: Función callback cuando se rechazan las cookies
  • onClose: Función callback cuando se cierra el banner

Estilización

  • Modificar propiedades personalizadas CSS para colores y efectos
  • Ajustar valores de desenfoque y opacidad del glassmorphism
  • Personalizar timing y easing de animaciones
  • Cambiar border radius y espaciado

Características de Accesibilidad

  • Navegación por Teclado: Soporte completo de teclado con teclas Tab y Escape
  • Gestión de Foco: Trampa de foco adecuada dentro del banner
  • Etiquetas ARIA: Etiquetas y roles ARIA comprehensivos
  • Lector de Pantalla: Compatible con lectores de pantalla
  • Alto Contraste: Soporta modo de alto contraste
  • Movimiento Reducido: Respeta las preferencias de movimiento del usuario

Soporte de Navegadores

  • Chrome 88+
  • Firefox 103+
  • Safari 15.4+
  • Edge 88+

Rendimiento

  • Ligero: ~8KB minificado
  • Animaciones aceleradas por GPU
  • Uso eficiente de backdrop-filter
  • Optimizado para dispositivos móviles
  • Sin dependencias externas

Ejemplos de Integración

Integración con React

x
import { useEffect } from 'react';

function App() {
    useEffect(() => {
        const cookieBanner = new GlassmorphismCookieBanner({
            onAccept: () => {
            }
        });
        
        return () => {
        };
    }, []);
    
    return <div>Contenido de tu app</div>;
}

Integración con Vue

<template>
    <div>Contenido de tu app</div>
</template>

<script>
export default {
    mounted() {
        this.cookieBanner = new GlassmorphismCookieBanner({
            onAccept: () => {
            }
        });
    },
    beforeDestroy() {
    }
}
</script>

HTML

61

líneas

CSS

337

líneas

JavaScript

303

líneas 


                <!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Banner de Cookies Glassmorphism</title>
</head>
<body>
    
    <div class="demo-background">
        <div class="bg-gradient"></div>
        <div class="bg-shapes">
            <div class="shape shape-1"></div>
            <div class="shape shape-2"></div>
            <div class="shape shape-3"></div>
        </div>
    </div>

    
    <div class="main-content">
        <h1>Demo del Banner de Cookies Glassmorphism</h1>
        <p>Esta es una página de demostración para mostrar el hermoso banner de consentimiento de cookies glassmorphism.</p>
        <button class="demo-btn" onclick="showCookieBanner()">Mostrar Banner de Cookies</button>
    </div>

    
    <div id="cookieBanner" class="cookie-banner" role="dialog" aria-labelledby="cookie-title" aria-describedby="cookie-description">
        <div class="cookie-content">
            <div class="cookie-icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="currentColor"/>
                </svg>
            </div>
            <div class="cookie-text">
                <h3 id="cookie-title">Usamos cookies</h3>
                <p id="cookie-description">
                    Utilizamos cookies para mejorar tu experiencia de navegación, servir contenido personalizado y analizar nuestro tráfico. 
                    Al hacer clic en "Aceptar Todo", consientes nuestro uso de cookies.
                </p>
            </div>
            <div class="cookie-actions">
                <button class="btn btn-secondary" onclick="declineCookies()" aria-label="Rechazar cookies">
                    <span>Rechazar</span>
                </button>
                <button class="btn btn-primary" onclick="acceptCookies()" aria-label="Aceptar todas las cookies">
                    <span>Aceptar Todo</span>
                    <div class="btn-shine"></div>
                </button>
            </div>
        </div>
        <button class="cookie-close" onclick="hideCookieBanner()" aria-label="Cerrar banner de cookies">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 4L4 12M4 4l8 8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            </svg>
        </button>
    </div>

    
    <div id="cookieBackdrop" class="cookie-backdrop"></div>
</body>
</html>
61líneas
2698caracteres
HTMLIdioma

Fragmentos de Código Relacionados

Explora packs de plantillas

¿Necesitas bloques más grandes? Descubre landings y colecciones de componentes.

Abrir la biblioteca de plantillas ->