Results 1 to 1 of 1

Thread: JS code for making Sequential fly-in text

  1. #1
    Administrator M.A.A's Avatar
    Join Date
    Oct 2011
    Posts
    345

    My Social Networking

    Add M.A.A on Facebook Add M.A.A on Google+

    JS code for making Sequential fly-in text

    Script flies in multiple text from the left edge of the window, one at a time in sequential order similar to a PowerPoint effect. It's versatile enough to handle any number of text (or other rich HTML like images!), and you can customize both the animation speed and pause between each message. A nice effect to highlight important points on your page!
    This script works in both IE5+ and NS6+.


    Code:
    <style type="text/css">
    
    .glidetext{
    position: relative;
    /*Set initial position of your text. Make it just enough to hide the text from view:*/
    left: -500px;
    }
    
    </style>
    
    <script type="text/javascript">
     
    var pausebetweenmsg=10 //customize pause in miliseconds between each message showing up (3000=3 seconds)
    var glidespeed=50 //customize glide speed in pixels per frame.
    
    var curobjindex=0
    
    function actualstyle(el, cssproperty){
    if (el.currentStyle)
    return el.currentStyle[cssproperty]
    else if (window.getComputedStyle){
    var elstyle=window.getComputedStyle(el, "")
    return elstyle.getPropertyValue(cssproperty)
    }
    }
    
    function collectElementbyClass(){
    var classname="glidetext"
    glidearray=new Array()
    var inc=0
    var alltags=document.all? document.all : document.getElementsByTagName("*")
    for (i=0; i<alltags.length; i++){
    if (alltags[i].className==classname)
    glidearray[inc++]=alltags[i]
    }
    if (glidearray.length>0)
    onebyoneglide()
    }
    
    function onebyoneglide(){
    if (curobjindex<glidearray.length)
    glidetimer=setInterval("glideroutine()",50)
    }
    
    function glideroutine(){
    if (parseInt(actualstyle(glidearray[curobjindex], "left"))<0)
    glidearray[curobjindex].style.left=parseInt(actualstyle(glidearray[curobjindex], "left"))+50+"px"
    else{
    glidearray[curobjindex].style.left=0
    curobjindex++
    clearInterval(glidetimer)
    setTimeout("onebyoneglide()", pausebetweenmsg)
    }
    }
    
    if (window.addEventListener)
    window.addEventListener("load", collectElementbyClass, false)
    else if (window.attachEvent)
    window.attachEvent("onload", collectElementbyClass)
    else if (document.getElementById)
    window.onload=collectElementbyClass
    
    </script>
    HTML Code:
    <div class="glidetext">This is text 1</div>
    <p class="glidetext">Another text (or image) <img src="http://www.nirc.co.uk/forums/images/smilies/customs3/Hello_Emote_by_TheSprinklezKid.gif"></p>
    <div class="glidetext">This is text 3</div>
    <div class="glidetext">This is text 4</div>
    Attached Files Attached Files

Similar Threads

  1. There is tremendous happiness in making others happy
    By Lienia henna in forum Random Talk
    Replies: 0
    Last Post: 11-16-2013, 10:28 AM
  2. Which companies making apps for Google Glasses
    By folleyhal in forum Technology
    Replies: 1
    Last Post: 11-16-2013, 06:36 AM
  3. Uphill Text
    By ghaza in forum Javascript and js libraries
    Replies: 0
    Last Post: 11-12-2013, 08:20 AM
  4. Text Shadow using css
    By web_guru in forum CSS
    Replies: 1
    Last Post: 10-10-2011, 12:12 PM
  5. Replies: 0
    Last Post: 10-12-2010, 08:09 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •