Login   Register  
Icontem

File: simple_example.html

Recommend this page to a friend!
Stumble It! Stumble It! Bookmark in del.icio.us Bookmark in del.icio.us
  Classes of Arturs Sosins  >  Glint effect  >  simple_example.html  >  Download  
File: simple_example.html
Role: Example script
Content type: text/plain
Description: Example of horizontal and vertical glint effect
Class: Glint effect
Create a glint light effect on HTML page elements
Author: By
Last change: HTML 5 DOCTYPE added
Date: 2011-09-21 05:45
Size: 1,449 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
 *
 * Glint effect provides you an ability to add glint effect 
 * to different HTML objects, which can append canvas element
 *
 * For more information, examples and online documentation visit: 
 * http://webcodingeasy.com/JS-classes/Javascript-glint-effect
**************************************************************/
-->
<html>
<head>
</head>
<body>
<style type="text/css">
  #line {
    position:relative;
	width: 600px;
	left:50px; 
	top:40px;
	height: 100px;
	background-color: red;
	font-size: 100px;
  }
  #line2 {
    position:relative;
	width: 100px;
	left:50px; 
	top:40px;
	height: 600px;
	background-color: red;
	font-size: 100px;
	text-align: center;
  }
</style>
<!-- a line from A to B -->
<div id="line">
	Some text here
</div>

<div id="line2">
S<br/>o<br/>m<br/>e<br/>
</div>
<script type="text/javascript" src="./glint.packed.js" ></script>
<script type="text/javascript">
var g1 = new glint("line",{onerror: function(){alert("Your browser doesn't support canvas");}});
var g2 = new glint("line2", {horizontal: false, angle: 135, onerror: function(){alert("Your browser doesn't support canvas");}});
</script>
</body>
</html>