Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like 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.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!