<!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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="./glint.jquery.js" ></script>
<script type="text/javascript">
$("#line").glint({onerror: function(){alert("Your browser doesn't support canvas");}});
$("#line2").glint({horizontal: false, angle: 135, onerror: function(){alert("Your browser doesn't support canvas");}});
</script>
</body>
</html>
|
Download
