Este efecto se incluye en la biblioteca de interfaz de usuario de JavaScript llamada script.aculo.us. script.aculo.us es una biblioteca de JavaScript construida sobre Prototype JavaScript Framework. Esta biblioteca nos brinda efectos visuales dinámicos con la ayuda del Modelo de objetos de documento (DOM) .
Ahora vamos a aprender específicamente sobre script.aculo.us Shake Effect
Shake Effect hace que la imagen de destino se mueva hacia adelante y hacia atrás tres veces. Veamos la implementación práctica de este efecto junto con HTML.
Sintaxis:
new Effect.Shake('id_of_element', [options]);
OR
new Effect.Shake(element, [options]);
Ejemplo:
<html>
<head>
<title>script.aculo.us Shake Effect</title>
<!-- Adding required scripts for Shake Effect -->
<script type="text/javascript"
src="/javascript/prototype.js"></script>
<script type="text/javascript"
src=
"/javascript/scriptaculous.js?load = effects">
</script>
<script type="text/javascript">
<!-- script.aculo.us - Shake Effect -->
function ShakeEffect(element){
new Effect.Shake(element);
}
</script>
</head>
<body>
<!-- HTML division with
id and onclick functionality-->
<div id="myimage" onclick="ShakeEffect(this);">
<img src="logo.jpg" alt="Screenshot" />
<h2>Click here to Shake element</h2>
</div>
</body>
</html>
Salida: cuando hace clic en ese texto, la imagen se sacudirá.
Publicación traducida automáticamente
Artículo escrito por romilvishol y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA