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
| Method name | new lightning(config); |
| Description | Create lightning instance |
| Input parameters | json config - lightning configuration
|
| 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
| Method name | show(startX, startY, endX, endY) |
| Description | Show 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
| Method name | hide() |
| Description | Hight the lightning bolt |
| Example | lt.hide() |
Latest changes
None for nowYou may also be interested in:
Powered by BlogAlike.com
