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> <!-- 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> |
Output: When you click on that text, the image will shake.
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
