Falling Text Using HTML JavaScript

Submitted by alpha_luna on Thursday, May 26, 2016 - 16:59.

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 ResultAdding JavaScript Script for Falling Text Effect Result 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.

Tags

Add new comment

About text formats
  • 673 views