✨ Efecto de Vibración Interactivo
Añade un toque dinámico y divertido a tu sitio web
🎯 ¡Prueba el Efecto!
1
🎯 Crea un elemento activador
En tu página web, añade un elemento como un botón, imagen o texto que servirá como activador del efecto de vibración. Este elemento debe ser fácilmente identificable como interactivo.
HTML
<div class="elemento-vibrante">Haz clic aquí para vibrar</div>
2
🎨 Estiliza el elemento
Agrega estilos CSS atractivos para que el elemento sea visualmente llamativo y los usuarios identifiquen que es interactivo. Incluye animaciones suaves y efectos hover.
CSS
@keyframes vibrar {
0% { transform: translate(0); }
20% { transform: translate(-5px, 5px); }
40% { transform: translate(5px, -5px); }
60% { transform: translate(-5px, 5px); }
80% { transform: translate(5px, -5px); }
100% { transform: translate(0); }
}
.elemento-vibrante {
cursor: pointer;
transition: all 0.3s ease;
}
.vibrando {
animation: vibrar 0.3s ease-out;
}
3
⚡ Añade la función de vibración
Utiliza JavaScript para detectar la interacción del usuario y activar tanto la vibración del dispositivo como la animación visual. La función incluye verificación de compatibilidad y feedback visual.
JavaScript
function vibrarDispositivo() {
if ("vibrate" in navigator) {
navigator.vibrate(200);
}
document.querySelector('.elemento-vibrante')
.classList.add('vibrando');
setTimeout(function() {
document.querySelector('.elemento-vibrante')
.classList.remove('vibrando');
}, 300);
}
🚀 ¡Listo para Implementar!
Con estos pasos simples, puedes añadir un efecto vibrante a tu sitio web que sorprenderá y deleitará a tus usuarios, haciendo que la experiencia de navegación sea aún más emocionante.
Más recursos
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp
Agentes de IA para tu e-commerce
Esta app te permite diseñar y probar agentes de IA que atienden a tus clientes
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp
ElSaltoWeb News
Un experimento visual con HTML y CSS inspirado en televisores CRT, señales analógicas, glitch y estética retro para presentar recursos, artículos o proyectos dentro de una interfaz diferente.
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp
MCP Builder IA: APK Android para generar conectores MCP con inteligencia artificial
MCP Builder IA es una APK Android para generar conectores MCP orientados a negocio. Permite crear proyectos Node.js, definir tools, revisar código, probar conexiones y exportar un ZIP listo para prototipar integraciones con WooCommerce, WordPress, WhatsApp Business, Supabase, Notion y más.
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp
El Futuro de la IA y las Páginas Web: Innovación y Transformación
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp
Descubre el BMW M135i: Potencia y Estilo en un Solo Paquete
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp