File: example.html

Recommend this page to a friend!
  Classes of Arturs Sosins   Water drop   example.html   Download  
File: example.html
Role: Example script
Content type: text/plain
Description: Different examples
Class: Water drop
Apply the water drop effect to Web page elements
Author: By
Last change:
Date: 12 years ago
Size: 2,483 bytes
 

Contents

Class file image Download
<!DOCTYPE html> <!-- /************************************************************* * This script is developed by Arturs Sosins aka ar2rsawseen, http://webcodingeasy.com * Feel free to distribute and modify code, but keep reference to its creator * * Water drop provides a drip effect on HTML objects as standalone * package and jquery plugin. It is possible to configure, speed, * color, field and toggle animations as fading and expanding. * * For more information, examples and online documentation visit: * http://webcodingeasy.com/JS-classes/Water-drop-effect **************************************************************/ --> <html> <head> </head> <body> <p>On click: <a href='javascript:void(0);' id='click'>Click me</a></p> <p>On mouse over: <a href='javascript:void(0);' id='mouseover'>Hover me</a></p> <p>Manual calling (click on this link, effect will work on above one): <a href='javascript:void(0);' onclick='mo.drop();'>Click me</a></p> <p>Reverse effect: <a href='javascript:void(0);' id='reverse'>Click me</a></p> <p>Opacity only: <a href='javascript:void(0);' id='opacity'>Click me</a></p> <p>Expand only: <a href='javascript:void(0);' id='expand'>Click me</a></p> <p>Transparent background: <a href='javascript:void(0);' id='transparent'>Click me</a></p> <p>Styled borders: <a href='javascript:void(0);' id='border'>Click me</a></p> <p>Callback previous one on animation end: <a href='javascript:void(0);' id='callback'>Click me</a></p> <p>Loop animation: <a href='javascript:void(0);' id='loop'>Click me</a></p> <script type="text/javascript" src="./waterDrop.packed.js" ></script> <script type="text/javascript"> //simple click var w = new waterDrop("click"); //mouse hover var mo = new waterDrop("mouseover", {event:"mouseover"}); //reverse effect var w = new waterDrop("reverse", {reverse: true}); //opacity only var w = new waterDrop("opacity", {expand: false, padding: 5}); //expand only var w = new waterDrop("expand", {fadeOut: false}); //transparent background var w = new waterDrop("transparent", {backgroundColor: "transparent"}); //styled borders var w = new waterDrop("border", {borderStyle: "dashed", borderColor: "red", borderWidth: 4, borderRadius: 50}); //callback on animation and var n = new waterDrop("callback", {onend: function(){w.drop()}}); //loop animation var l = new waterDrop("loop", {onend: function(){setTimeout(function(){l.drop();}, 500)}}); </script> </body> </html>