Home › Forums › JavaScript › SIWEBST jQuery falling text
- This topic is empty.
Viewing 1 post (of 1 total)
-
AuthorPosts
-
December 17, 2013 at 2:25 am #158501Si web studioParticipant
SIWEBST jQuery FALLING TEXT plugin animate the text content with a styles of a #divmove to #divbox, which is great for spice up your website.
TRY IT :)
<style> #divbox { z-index:1000; text-align:left; position:absolute; width:auto; top:160px; left:160px; font-size:60px; color:#111; text-shadow: RED 0px 0px 0.7em; font-family:"Impact", sans-serif; font-weight:bold; } #divmove { z-index:1000; text-align:left; position:fixed; width:auto; top:40%; left:40%; font-size:300px; color:transparent; text-shadow: RED 0px 0px 2em; font-family:"Impact", sans-serif; font-weight:bold; } </style> <script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script> <script> var swsfallingtext = "S I W E B S T jQuery F A L I N G T E X T :)" var text = new Array(); text = swsfallingtext.split(' '); function swsfall(loop) { var swstext = text[loop]; $('#divmove').html(swstext).animate({ top:160, left: 160 + $('#divbox').width(), fontSize:60 },400, function(){ loop = loop + 1; if(loop < text.length) {$('#divbox').append(swstext).append(' '); swsfall(loop);} else {$('#divmove').empty();$('#divbox').append(text[text.length-1]);} } ).removeAttr('style'); } </script> <body onload="swsfall(0);"> <div id="divbox"></div> <div id="divmove"></div> </body>
Visit Si web studio WEB APLICATIONS site for more cool animation samples and try out our FALLING TEXT EDITOR, ANIMATED WEB ADVERTISEMENTS and make new world record in our MEMORY TRAINING GAME :)
-
AuthorPosts
Viewing 1 post (of 1 total)
- The forum ‘JavaScript’ is closed to new topics and replies.