Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <title>TagCanvas example</title>
- <!--[if lt IE 9]><script type="text/javascript" src="http://www.goat1000.com/tagcanvasjs"></script><![endif]-->
- <script src="http://www.goat1000.com/tagcanvas.js?1.14" type="text/javascript"></script>
- <script type="text/javascript">
- window.onload = function() {
- $ = document.getElementsByTagName("canvas");
- try {
- for(x in $) {
- if($[x].id.indexOf("myCanvas") !== -1) {
- y = $[x].id.match(/^myCanvas(\d+)$/)[1];
- TagCanvas.Start('myCanvas'+y,'tags'+y,{
- textColour: '#ff0000',
- outlineColour: '#ff00ff',
- initial: [0.3,-0.3],
- reverse: true,
- decel: 1.0,
- depth: -0.8,
- freezeActive: true,
- maxSpeed: 0.05
- }
- );
- TagCanvas.depth = 0.92;
- TagCanvas.pulsateTo = 0.6;
- TagCanvas.initial = [0.1,-0.1];
- TagCanvas.decel = 0.98;
- }
- }
- } catch(e) {
- // something went wrong, hide the canvas container
- document.getElementById('myCanvasContainer').style.display = 'none';
- }
- };
- </script>
- </head>
- <body>
- <h1>TagCanvas example page</h1>
- <div id="myCanvasContainer">
- <canvas width="300" height="300" id="myCanvas1" style="background-image: url('http://touchingtips.files.wordpress.com/2010/08/heaven_s_rays1.jpg');">
- <p>Anything in here will be replaced on browsers that support the canvas element</p>
- </canvas>
- <canvas width="300" height="300" id="myCanvas2" style="background-image: url('http://touchingtips.files.wordpress.com/2010/08/heaven_s_rays1.jpg');">
- <p>Anything in here will be replaced on browsers that support the canvas element</p>
- </canvas>
- <canvas width="300" height="300" id="myCanvas3" style="background-image: url('http://touchingtips.files.wordpress.com/2010/08/heaven_s_rays1.jpg');">
- <p>Anything in here will be replaced on browsers that support the canvas element</p>
- </canvas>
- <canvas width="300" height="300" id="myCanvas4" style="background-image: url('http://touchingtips.files.wordpress.com/2010/08/heaven_s_rays1.jpg');">
- <p>Anything in here will be replaced on browsers that support the canvas element</p>
- </canvas>
- </div>
- <div id="tags1">
- <ul>
- <li><a href="#">Luz</a></li>
- <li><a href="#">Céu</a></li>
- <li><a href="#">Luzeiros</a></li>
- <li><a href="#">Firmamento</a></li>
- </ul>
- </div>
- <div id="tags2">
- <ul>
- <li><a href="#">Cereja</a></li>
- <li><a href="#">Laranja</a></li>
- <li><a href="#">Pêra</a></li>
- <li><a href="#">Mamão</a></li>
- </ul>
- </div>
- <div id="tags3">
- <ul>
- <li><a href="#">Caneta</a></li>
- <li><a href="#">Lápis</a></li>
- <li><a href="#">Apontador</a></li>
- <li><a href="#">Grafite</a></li>
- </ul>
- </div>
- <div id="tags4">
- <ul>
- <li><a href="#">Que isso</a></li>
- <li><a href="#">Novinha</a></li>
- <li><a href="#">Que isso</a></li>
- <li><a href="#">Gordinha</a></li>
- </ul>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement