File: example.html

Recommend this page to a friend!
  Classes of Arturs Sosins   Lightning effect   example.html   Download  
File: example.html
Role: Example script
Content type: text/plain
Description: Lightning effect for text
Class: Lightning effect
Draw a random lightning bolt on the page
Author: By
Last change:
Date: 12 years ago
Size: 1,423 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 * * Lightning draws a randomly generated lightning with glow effect on html page * from x and y coordinates, to other x and y coordinates. * * For more information, examples and online documentation visit: * http://webcodingeasy.com/JS-classes/Javascript-lightning-effect **************************************************************/ --> <html> <head> </head> <body style='background-color: #000;'> <h1 style='color: #fff; text-align: center; width: 400px; margin: 100px auto;' id='heading'>Cool lightning heading!</h1> <script type="text/javascript" src="./lightning.packed.js" ></script> <script type="text/javascript"> var lt = new lightning({displace: 80}); var heading = document.getElementById("heading"); var obl = heading.getBoundingClientRect(); var bounds = {}; bounds.top = obl.top; bounds.left = obl.left; bounds.width = (obl.width) ? obl.width : obl.left-obl.right; bounds.height = (obl.height) ? obl.height/2 : (obl.top - obl.bottom)/2; setInterval(function(){ lt.hide(); lt.show(bounds.left, bounds.top + bounds.height, bounds.left + bounds.width, bounds.top + bounds.height) }, 100); </script> </body> </html>