Falling Text Effect

In this article, 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 fall or drop the content text individually before the next text. You can use it on your site for it to have a simple headlines falling text effect.

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 source code for the external files. (Just click "Download Code")
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
   
   >
   

Result:

Normal Text

Adding JavaScript Script for 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 with all modern versions of a browser.

Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.

Download