script.aculo.us Shake Effect
Last Updated :
30 Dec, 2020
This effect falls under JavaScript’s UI library called script.aculo.us. script.aculo.us is a JavaScript library built on the Prototype JavaScript Framework. This library gives us dynamic visual effects with the help of the Document Object Model (DOM).
Now let’s learn specifically about script.aculo.us Shake Effect
Shake Effect causes the Target image to move back and forward three times. Let’s see practical implementation of this effect along with HTML.
Syntax:
new Effect.Shake('id_of_element', [options]);
OR
new Effect.Shake(element, [options]);
Example:
< html >
< head >
< title >script.aculo.us Shake Effect</ title >
< script type = "text/javascript"
src = "/javascript/prototype.js" ></ script >
< script type = "text/javascript"
src =
"/javascript/scriptaculous.js?load = effects" >
</ script >
< script type = "text/javascript" >
function ShakeEffect(element){
new Effect.Shake(element);
}
</ script >
</ head >
< body >
< div id = "myimage" onclick = "ShakeEffect(this);" >
< img src = "logo.jpg" alt = "Screenshot" />
< h2 >Click here to Shake element</ h2 >
</ div >
</ body >
</ html >
|
Output: When you click on that text, the image will shake.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...