¿Cómo se ha creado este efecto de vibración en dispositivos móviles?.
✨ Cómo funciona:
- Crea un elemento activador: En tu página web, añade un elemento, como un botón, una imagen o un texto, que servirá como activador del efecto de vibración. Por ejemplo, podrías utilizar un botón con un mensaje que invite a los usuarios a hacer clic para sentir la vibración.
<div class="elemento-vibrante">Haz clic aquí para vibrar</div>
Estiliza el elemento: Agrega estilos CSS para que el elemento sea atractivo y fácil de identificar como interactivo. En nuestro caso, hemos utilizado la clase «elemento-vibrante» y hemos cambiado el cursor para indicar que es clickeable.
@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; /* Cambia el cursor a una mano para indicar que el elemento es interactivo */
}
.vibrando {
animation: vibrar 0.3s ease-out; /* Se aplica la animación al elemento con una duración de 0.3 segundos */
}
Añade la función de vibración: Utiliza JavaScript para definir la acción que ocurrirá cuando los usuarios interactúen con el elemento. La función vibrarDispositivo() activará la vibración en dispositivos móviles compatibles y aplicará una animación CSS para dar la sensación de vibración.
function vibrarDispositivo() {
if ("vibrate" in navigator) {
navigator.vibrate(200); // Vibración de 200 milisegundos
}
document.querySelector('.elemento-vibrante').classList.add('vibrando'); // Agrega la clase "vibrando" para iniciar la animación
setTimeout(function() {
document.querySelector('.elemento-vibrante').classList.remove('vibrando'); // Elimina la clase "vibrando" después de 300 milisegundos
}, 300);
}
¡Y eso es todo! 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!
¿Listo para hacer vibrar tu contenido? Prueba este truco hoy mismo y comparte con nosotros tus experiencias. ¡Nos encantaría ver cómo lo implementas en tu sitio web!