Efecto de Vibración Interactivo

✨ 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:

El Futuro de la IA y las Páginas Web: Innovación y Transformación

COMPARTIR EN:

Descubre el BMW M135i: Potencia y Estilo en un Solo Paquete

COMPARTIR EN:

La Evolución de los Coches de F1: Innovación y Tecnología en la Velocidad

COMPARTIR EN:

Resultados Completos de los Nadadores de GEBA en el 41 Aniversario de ETANDIL

COMPARTIR EN:

El Futuro de la Electrónica de Consumo en Uruguay: Referentes y Perspectivas

COMPARTIR EN:

289

✨ Efecto de Vibración Interactivo

🎯 ¡Prueba el Efecto!

🚀 ¡Listo para Implementar!

Más recursos

El Futuro de la IA y las Páginas Web: Innovación y Transformación

Descubre el BMW M135i: Potencia y Estilo en un Solo Paquete

La Evolución de los Coches de F1: Innovación y Tecnología en la Velocidad

Resultados Completos de los Nadadores de GEBA en el 41 Aniversario de ETANDIL

El Futuro de la Electrónica de Consumo en Uruguay: Referentes y Perspectivas

Email Designer: la herramienta gratuita y open source para crear emails que sí funcionan