Open In App

script.aculo.us Shake Effect

Improve
Improve
Like Article
Like
Save
Share
Report

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.



Last Updated : 30 Dec, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads