Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript SIWEBST jQuery falling text

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #158501
    Si web studio
    Participant

    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.

    Si web studio 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 :)

Viewing 1 post (of 1 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.