<!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> |