Create Flash like tag cloud from HTML5'tag Canvas
1.In head tag of your html page use follwing code
<script type="text/javascript" src="excanvas.js"></script> <script type="text/javascript"> window.onload = function() { try { TagCanvas.Start('myCanvas'); } catch(e) { // in Internet Explorer there is no canvas! document.getElementById('myCanvasContainer').style.display = 'none'; } }; </script><script type="text/javascript" src="tagcanvas.js"></script> <script type="text/javascript" src="jqueryTagcanvas.js"></script>
dont worry i'll provide u needed .js files link ;) :) download files from here
2. in body tag use following code
<canvas width="250" height="250" id="myCanvas"> <p>Anything in here will be replaced on browsers that support the canvas element</p> <ul> <li><a href="http://www.linkedin.com/in/sarveshkushwaha" target="_blank"> Linkedin</a></li> <li><a href="https://www.facebook.com/SarveshKushwaha" target="_blank">Facebook</a></li> <li><a href="https://twitter.com/#!/SSSSTUD" target="_blank">Twitter</a></li> <li><a href="https://plus.google.com/u/0/106654246555195291469/" target="_blank">Google+</a></li> <li><a href="https://www.xing.com/profile/Sarvesh_Kushwaha" target="_blank">Xing</a></li> <li><a href="http://www.researchgate.net/profile/Sarvesh_Kushwaha/" target="_blank">Researchgate</a></li> <li><a href="http://www.behance.net/sarveshkushwaha" target="_blank">Behance</a></li> <li><a href="http://zerply.com/sarveshkushwaha" target="_blank">Zerply</a></li> <li><a href="http://pulse.yahoo.com/_YGITOM7UQEIHIJSFFGIE2TDOQE" target="_blank">yahoo</a></li> <li><a href="http://sarveshkushwaha.blogspot.com" target="_blank">Blog</a></li> <li><a href="http://sarveshkushwaha.500px.com" target="_blank">500px</a></li> </ul> </canvas>
you can change the size of it and you can change the speed of text which are moving .you can use images as an alternative of text , u can change the color .... ooooooofffff i mean you can customize it the way you want ;) ;) :P :P .
nice article very helpful .
ReplyDeletehow to increase the font size
ReplyDeletehow to increse the font size
ReplyDeleteyeah you can change the size of font , do it from javascript i m using . there is option to change the font size .
ReplyDeletegenial sos un genio !!!
ReplyDeleteThanks Mau
ReplyDeleteThis comment has been removed by the author.
ReplyDelete