Good Day!!!

Today, we are going to learn about falling text effect, using HTML JavaScript. This script adds a simple twist to your regular text on your page. It will randomly falling or dropping the content text individually before the next text. You can use it in your site for it to have a simple headlines falling text effect.

In this work of script, every content is wrapped in a LI element of this work. All animation is provided by the CSS3. This script or work is compatible in all modern versions of browser.

Directions:

First: Kindly copy this code to the HEAD section of your page.

1. <link
   
   rel
   
   =
   
   "stylesheet"
   
   type
   
   =
   
   "text/css"
   
   href
   
   =
   
   "fallingtext.css"
   
   /
   
   >
   
2. <script
   
   src
   
   =
   
   "js_1.js"
   
   ></
   
   script
   
   >
   
3. <script
   
   src
   
   =
   
   "jquery.js"
   
   ></
   
   script
   
   >
   
4. <script
   
   src
   
   =
   
   "fallingtext.js"
   
   >
   
5. </
   
   script
   
   >
   
6. 
   
7. <script
   
   >
   
8. jQuery(function(){
   
9. 
   
10. $('#headline').fallingtext({
    
11. pause: 3000,
    
12. cycles: 2,
    
13. ontextchange:function(msgindex, msg, eachchar){
    
14. }
    
15. })
    
16. })
    
17. </
    
    script
    
    >
    

*Download the sourcecode for the external files. (Just click "Download Code")

Second: Simply add this code to your BODY section of the page.

1. <ul
   
   id
   
   =
   
   "headline"
   
   class
   
   =
   
   "fallingtext"
   
   style
   
   =
   
   "height:2em"
   
   >
   
2. <li
   
   >
   
   Sourecodester</
   
   li
   
   >
   
3. <li
   
   >
   
   Blog, Articles</
   
   li
   
   >
   
4. <li
   
   >
   
   Tutorials</
   
   li
   
   >
   
5. <li
   
   >
   
   And Programming</
   
   li
   
   >
   
6. </
   
   ul
   
   >
   

So what can you say about this work? Share your thoughts in the comment section below and also, don’t forget to like this page. Practice coding. Thank you.

Download