If we want to display any news in our websites, news ticker is the best visible solution for this. In this tutorial we will learn how to create the simple scrolling news ticker.
The news ticker is controlled by CSS and jQuery. Here I have attached the complete source code of the script without any CSS. The styling is up to you.
How to add this script on your website?
- Add this jQuery before closing head tag (</head>).
<script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js”> - Add the below HTML codes with your news content where you want to show scrolling news.
- Style up the news blocks using CSS.
[codepen_embed height=”265″ theme_id=”0″ slug_hash=”BpBzmb” default_tab=”html,result” user=”blbwd”]See the Pen <a href=’http://codepen.io/blbwd/pen/BpBzmb/’>Scrolling Text using CSS & Jquery</a> by Sanjay Bhowmick (<a href=’http://codepen.io/blbwd’>@blbwd</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]
Preview link: http://codepen.io/blbwd/full/BpBzmb/