script.aculo.us Shake Effect

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.

Article Tags :

JavaScript

Web Technologies

script.aculo.us