How to Design a Vertical Scrolling News Ticker With HTML, CSS And JAVASCRIPT

Hello Readers,
In this article, we learn how to create a “Vertical Scroll News Ticker” in HTML, and javascript.
So basically everybody wants his blog, news website, and magazines up to date and on top so far.
In WordPress website for scrolling news and for tickers you will get many plugins to do so, Many of free and purchased plugins
But with coding today we create it using HTML CSS and javascript.
Let’s Get to it,
First open editor which you have,(Sublime Text Editor) etc
Create three files,
Index.html
style.css and
script.js
You can also write the js code in HTML file using “script tag”.
in “index.html” in body tag start a div tag with class “placeholder”.
and then ul tag and inside “ul” tag start li tag (list tag)
and write your text which you want to scroll.
<li><span>06/04/2018</span><a href=”#”>Welcome to techexperto, Javascript tutorial</a></li>
write it as many times as you want.


after all this process go to CSS file and start from body tag and style it to look attractive and impressive.

with CSS you can design a file, list, web page as you want it to look like.


after completing the styling Go to script.js file and enter the complete code javascript is the main thing to run and allow the news to move upward.
its function run the complete text and allow it to scroll vertical and move it.

you can also set time of scrolling in a js file and put the time as you want to. javascript is the main file to create the scrolling news ticker.

If you like the article and get what you want please like us and comment below for more articles and for any queries.
Thank You.

Related posts

Leave a Comment