Skip to content
Related Articles

Related Articles

Improve Article
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>
  
        <!-- 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.




My Personal Notes arrow_drop_up
Recommended Articles
Page :