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

Javascript lightning effect

Lightning class draws a randomly generated lightning with glow effect effect on html page from x and y coordinates, to other x and y coordinates.

Package contains lightning.js, lightning.packed.js (packed javascript), three example files: simple_example.html (simple lightning), mouse_example.html (lightning strikes at mouse coordinates), example.html (lightning effect fot text) to demonstrate class functionality.

Contents

Download

Example codes

<!DOCTYPE html>
<html>
<head>
</head>
<body style="background-color: #000;">
<h1 style="color: #fff; text-align: center;">Simple lightning (refresh page)</h1>
<script type="text/javascript" src="./lightning.packed.js" ></script>
<script type="text/javascript">
var lt = new lightning({
    detail: 1,
    displace: 500,
    glowWidth: 20,
    boltWidth: 3,
    boltColor: "#ffff88",
    glow: true,
    glowColor: "#ffffff",
    glowAlpha: 0.1
});
lt.show(0, 0, 500, 500);
</script>
</body>
</html>

Examples in action

Example scripts provided with package in action:

Method list

Constructor

Back to method list

Method namenew lightning(config);
DescriptionCreate lightning instance
Input parameters

json config - lightning configuration

  • int detail - detalization level (length of each stage) (default: 1)
  • int displace - max offset of displace (default: 500)
  • int boltWidth - width of lightning bolt (default: 3)
  • string boltColor - color of lightning bolt (default: '#ffff88')
  • bool glow - apply glow effect to lightning bolt (default: 'true')
  • int glowWidth - width of glow (default: '20')
  • string glowColor - color of glow (default: white)
  • float glowAlpha - alpha value of glow (default: 0.1)
Example input
var lt = new lightning({
	detail: 1,
	displace: 500,
	boltWidth: 3,
	boltColor: "#ffff88",
	glow: true,
	glowWidth: 20,
	glowColor: "#ffffff",
	glowAlpha: 0.1
});

Show lightning

Back to method list

Method nameshow(startX, startY, endX, endY)
DescriptionShow lightning bolt from and to specified coordinates
Input parameters

int startX and startY - coordinates where lightning bolt should start

int endX and endY - coordinates where lightning bolt should end

Example

lt.show(0,0,100,100)

Hide lightning

Back to method list

Method namehide()
DescriptionHight the lightning bolt
Example

lt.hide()

Latest changes

None for now

You may also be interested in:

Powered by BlogAlike.com

blog comments powered by Disqus