Results 1 to 1 of 1

Thread: How to make Falling Text Rotator

  1. #1

    How to make Falling Text Rotator

    This jQuery script adds a twist to the regular text rotator, by randomly dropping the letters of each piece of content out of view before showing the next. It works great on short headlines, with each content wrapped simply in a LI element on the page.

    Falling Text Rotator uses the helpful plugin Lettering.js to manipulate text on a character basis, and CSS3 to provide the animation. It works great in all modern versions of FF, Chrome, IE10+ etc, while in IE8/9, it reverts back to a basic rotator with no animation effect.



    Step 1: Add the following code to the <HEAD> section of your page:

    HTML Code:
    <link rel="stylesheet" type="text/css" href="fallingtextrotator.css" />
    
    <link href='http://fonts.googleapis.com/css?family=Orbitron:400,700,900' rel='stylesheet' type='text/css'>
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    
    <script src="jquery.lettering-0.6.1.min.js"></script>
    
    <script src="fallingtextrotator.js">
    
    </script>
    
    <script>
    
    
    jQuery(function(){ // on DOM load
    
        $('#headline').fallingtextrotator({
            pause: 3000,
            cycles: 2,
            ontextchange:function(msgindex, msg, eachchar){
                //console.log(msgindex, msg, eachchar)
            }
        })
    })
    
    </script>
    Download the three external files from attchment and upload to same directory as where your webpage resides.

    Step 2: Add the below sample HTML markup to your <BODY>:

    HTML Code:
    <ul id="headline" class="fallingtextrotator" style="height:2em">
    <li>Adminspoint</li>
    <li>Bigger, Bolder</li>
    <li>And Badder</li>
    <li>Than even Rambo!</li>
    </ul>
    Modifying the look and speed of the animations is done entirely inside fallingtextrotator.css. By default the font used is "Orbitron", from Google fonts. CSS3 text shadows are used to give it a 3D look, with the even messages given a different shadow color for flare (see the ul.fallingtextrotator > li:nth-of-type(even) selector).
    There are two CSS3 animations defined on each text. The first one occurs on the LI level, and is responsible for the fade in effect you see on each message when it is revealed:

    HTML Code:
    ul.fallingtextrotator > li{
     position: absolute;
     opacity: 0;
     top: 0;
     left: 0;
     -moz-transition: all 0.3s ease-in;/
     -webkit-transition: all 0.3s ease-in;
     -o-transition: all 0.3s ease-in;
     -ms-transition: all 0.3s ease-in;
     transition: all 0.3s ease-in;
    }[LEFT][/LEFT]



    The opacity property being initially set to 0 (then 1 by the script later on) is what causes the text to fade into view. Change 0.3s to the desired animation duration.
    The 2nd animation is defined on the individual character level, which are each wrapped in its own <span class="charx"> tag, with x being an integer starting with 1:

    HTML Code:
    ul.fallingtextrotator > li.dropdown span[class*="char"]{
     opacity: 0;
     -moz-transform: translateY(300px) rotateZ(120deg); /* drop down and rotate */
     -webkit-transform: translateY(300px) rotateZ(120deg);
     transform: translateY(300px) rotateZ(120deg);
     -moz-transition: all 0.3s ease-in;
     -webkit-transition: all 0.3s ease-in;
     -o-transition: all 0.3s ease-in;
     -ms-transition: all 0.3s ease-in;
     transition: all 0.3s ease-in;
    }[LEFT][/LEFT]


    Once again, you can change 0.3s to reflect the desired duration of the falling text animation.

    Demo is also attached.
    Attached Thumbnails Attached Thumbnails How to make Falling Text Rotator-falling-text-rotator.png  
    Attached Files Attached Files

Similar Threads

  1. Why coupon codes website and my query is falling down?
    By Lienia henna in forum Search Engines Talk
    Replies: 1
    Last Post: 12-04-2013, 07:28 AM
  2. Uphill Text
    By ghaza in forum Javascript and js libraries
    Replies: 0
    Last Post: 11-12-2013, 08:20 AM
  3. Text Shadow using css
    By web_guru in forum CSS
    Replies: 1
    Last Post: 10-10-2011, 12:12 PM
  4. PHP: How do I read from text file?
    By Meer in forum Server Administration
    Replies: 0
    Last Post: 10-04-2010, 02:30 PM
  5. How To Truncate Text Using PHP
    By AP admin in forum PHP
    Replies: 0
    Last Post: 07-28-2010, 08:21 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
  •