Recommended:

  • phpclasses.org
  • jsclasses.org
  • jsmag.com
  • siteapps.com
  • View our reviews on Hot Scripts
  • JS Tutorial
  • scripts.com
  • securesignup.com

Recent Comments

Powered by Disqus

Back to articles

Water drop effect

Water Drop class provides a water drop effect on HTML elements as a standalone package or jquery plugin. It is possible to configure, speed, color, field and toggle animations as fading and expanding

Package contains waterDrop.js, waterDrop.packed.js (packed javascript), waterDrop.jquery.js (jquery plugin) and three example files: simple_example.html, example.html and jquery_example.html, to demonstrate class functionality.

Contents

Download

Back to contents

Example codes

Back to contents

<!DOCTYPE html>
<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>
<script type="text/javascript" src="./waterDrop.packed.js" ></script>
<script type="text/javascript">
new waterDrop("click");
var mo = new waterDrop("mouseover", {event:"mouseover"});
</script>
</body>
</html>

Live Examples

Back to contents

On click: Click me

On mouse over: Hover me

Manual calling (click on this link, effect will work on above one): Click me

Reverse effect: Click me

Opacity only: Click me

Expand only: Click me

Transparent background: Click me

Styled borders: Click me

Callback previous one on animation end: Click me

Loop animation: Click me

Examples in action

Back to contents

Example scripts provided with package in action:

Method list

Back to contents

Constructor

Back to method list

Method namenew waterDrop(id, config);
DescriptionAdd water drop effect to HTML object
Input parameters

string or HTML element id - id of element or HTML element itself, where to add water drop effect effect

json config - Json structure with configuration properties

  • string event - event name, were to attach effect (default: 'click')
  • int borderWidth - width of the border in pixels (default: 2)
  • string borderStyle - style of the border, any CSS valid value (default: 'solid')
  • string borderColor - color of the border , any CSS valid color (default: 'black')
  • int borderRadius - radius of the border (default: 5)
  • string backgroundColor - color of the background, any CSS valid color (default: 'white')
  • int padding - paddding from original element in pixels (default: 0)
  • bool fadeOut - use fadeout effect (default: true)
  • bool expand - use expand effect (default: true)
  • int speed - speed of animation (default: 10)
  • int step - amount of pixels to move borders on every animation step (default: 1)
  • int expandSteps - amount of animation steps (default: 50)
  • function onend - callback function when animation ends (default: null)
Example input
var w = new waterDrop("somelement", 
{
	//event where to attach effect
	event: "click",
	//width of border
	borderWidth: 2,
	//style of border
	borderStyle: "solid",
	//color of border
	borderColor: "black",
	//border radius
	borderRadius: 5,
	//background color
	backgroundColor: "white",
	//padding from original element
	padding: 0,
	//fadeOut effect
	fadeOut: true,
	//expand effect
	expand: true,
	//animation speed
	speed: 10,
	//animation progress
	step: 1,
	//total animation steps
	expandSteps: 50,
	//reverse effect
	reverse: false
});
Jquery Example

$("somelement").waterDrop({event: "click"})

Perform effect action

Back to method list

Method namedrop()
DescriptionPerform effect action without any event
Jquery Example

$("somelement").waterDrop("drop")

Latest changes

Back to contents

None for now

You may also be interested in:

Powered by BlogAlike.com

blog comments powered by Disqus