Hello world!

Welcome to WordPress. This is your first post. Edit or delete it, then start writing!

Un comentario

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

") O en un plugin tipo "Insert Headers and Footers" ============================================ */document.addEventListener('DOMContentLoaded', function () {/* 1. Crear los elementos del cursor una sola vez */ var glow = document.createElement('div'); glow.id = 'custom-cursor-glow'; document.body.appendChild(glow);var cursor = document.createElement('div'); cursor.id = 'custom-cursor'; cursor.innerHTML = ''; document.body.appendChild(cursor);var cursorIcon = cursor.querySelector('i'); var cursorText = cursor.querySelector('span');/* 2. Config por variante: tamaño del circulo y tamaño de fuente al activarse */ var VARIANT_SIZE = { 'cursor-solid': 72, 'cursor-gradient': 72, 'cursor-glass': 66, 'cursor-outline': 66, 'cursor-square': 80, 'cursor-blur': 74, 'cursor-glow': 60, 'cursor-icon': 76 }; var VARIANT_FONT = { 'cursor-solid': 11, 'cursor-gradient': 11, 'cursor-glass': 11, 'cursor-outline': 10, 'cursor-square': 11, 'cursor-blur': 10, 'cursor-glow': 11, 'cursor-icon': 9 }; var ALL_VARIANTS = Object.keys(VARIANT_SIZE);/* 3. Movimiento con retardo (lerp) */ var mouseX = 0, mouseY = 0; var curX = 0, curY = 0; var ease = 0.16; var currentSize = 0; var targetSize = 0; var glowExtra = 30;document.addEventListener('mousemove', function (e) { mouseX = e.clientX; mouseY = e.clientY; });function loop() { curX += (mouseX - curX) * ease; curY += (mouseY - curY) * ease; currentSize += (targetSize - currentSize) * ease;cursor.style.opacity = currentSize > 0.5 ? '1' : '0'; cursor.style.width = currentSize + 'px'; cursor.style.height = currentSize + 'px'; cursor.style.transform = 'translate(' + (curX - currentSize / 2) + 'px,' + (curY - currentSize / 2) + 'px)'; var glowSize = currentSize > 0 ? currentSize + glowExtra : 0; glow.style.width = glowSize + 'px'; glow.style.height = glowSize + 'px'; glow.style.transform = 'translate(' + (curX - glowSize / 2) + 'px,' + (curY - glowSize / 2) + 'px)';requestAnimationFrame(loop); } loop();/* 4. Detectar hover sobre cualquier elemento con alguna clase cursor-* */ var selector = ALL_VARIANTS.map(function (v) { return '.' + v; }).join(', ');document.addEventListener('mouseover', function (e) { var target = e.target.closest(selector); if (!target) return;var variant = ALL_VARIANTS.find(function (v) { return target.classList.contains(v); }); if (!variant) return;/* limpia variantes anteriores y aplica la actual */ ALL_VARIANTS.forEach(function (v) { cursor.classList.remove(v); }); ALL_VARIANTS.forEach(function (v) { document.body.classList.remove(v); }); cursor.classList.add(variant); document.body.classList.add(variant, '__active'); target.classList.add('__active');targetSize = VARIANT_SIZE[variant] || 70;var text = target.getAttribute('data-cursor-text') || ''; var iconClass = target.getAttribute('data-cursor-icon') || ''; cursorText.textContent = text; cursorText.style.fontSize = text ? (VARIANT_FONT[variant] || 11) + 'px' : '0px'; cursorIcon.className = iconClass; cursorIcon.style.fontSize = iconClass ? (variant === 'cursor-icon' ? 16 : 14) + 'px' : '0px'; });document.addEventListener('mouseout', function (e) { var target = e.target.closest(selector); if (!target) return; var related = e.relatedTarget; if (related && target.contains(related)) return;target.classList.remove('__active'); document.body.classList.remove('__active'); ALL_VARIANTS.forEach(function (v) { document.body.classList.remove(v); }); targetSize = 0; cursorText.style.fontSize = '0px'; cursorIcon.style.fontSize = '0px'; });});