How to create a news ticker using jQuery ?

18 May, 2021
A news ticker is a text-based display either in the form of graphic that display news scrolling text running from up to down or right to left. In this article, we will use a jQuery plugin called easy-ticker to create a news ticker in a simple manner.
To use this plugin, simply add the CDN link in the script tag of your HTML code.
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script><script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery-easy-ticker/2.0.0/jquery.easy-ticker.min.js”></script>
Let us look at the HTML code to know how we can create a news ticker using the easy-ticker plugin.
HTML
<!DOCTYPE HTML><html>  <head>    <title>News Ticker Effect</title>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easy-ticker/2.0.0/jquery.easy-ticker.min.js">    </script>      <style>        .dashboard {            background-color: green;            width: 600px;            height: 350px;            border: 3px solid black;            overflow: hidden;            border-radius: 15px;            margin: 0px auto;        }          ul {            margin: 1px;            padding: 1px;        }          li {            text-align: justify;            border-bottom: 2px solid blue;        }          h1 {            color: red;        }    </style></head>  <body style="text-align:center;">    <h1>GFG COURSES</h1>    <div class="dashboard">        <ul id="news">            <li>                <h1>Android App with Kotlin</h1>                <p>                    This course will begin from the                     basics of Android Development and                    will take you to a level where                     you can make full fledged Android                     apps. It covers things like UI                     building, Kotlin programming,                    communicating between different                     screens of an app,implementing                     static and dynamic custom lists,                     working with databases ,fetching                     data from the internet using REST                     APIs, using various important                     libraries and working with local                     device storage.                </p>            </li>              <li>                <h1>                    Data Structure and Algorithm self paced                </h1>                                  <p>                    This course is a complete package that                     helps you learn Data Structures and                     Algorithms from basic to an advanced                     level. The course curriculum has been                     divided into 10 weeks where you can                     practice questions & attempt the                     assessment tests according to your                     own pace. The course offers you a                    wealth of programming challenges that                     will help you to prepare for interviews                    with top-notch companies like Microsoft,                     Amazon,Adobe etc.                </p>            </li>              <li>                <h1>Java Backend Course</h1>                <p>                    This course will help you to learn                     Advanced Java, Spring / Spring Boot,                    Hibernate, RESTful APIs, Micro-services                    & related technologies to build Java                    -based web applications. The course will                     be mentored & guided by an Industry                     expert having hands-on experience in                     the design, development & maintenance                     of Java (Spring / Spring Boot) based                     web applications.The course includes 1                     major & 2 minor projects based on real                    -world applications with guided lab                     sessions.                </p>            </li>              <li>                <h1>Fundamentals of Java and Collections</h1>                <p>                    This course covers the basics of Java                     and in-depth explanations to Java                    Collections Framework along with video                     explanations of some problems based on                    the Java Collections Framework. The                     Java Collections Framework is a set of                    classes, Interfaces, and methods that                     provide us various data structures like                    LinkedList, ArrayList, HashMap, HashSet                     etc.                </p>            </li>        </ul>    </div>      <script type="text/javascript">          $(document).ready(function () {              // Calling easyTicker function to             // create newsticker movement            $('.dashboard').easyTicker({                direction: 'up',                easing: 'swing',                speed: 'slow',                interval: 2000,                height: 'auto',                mousePause: true,                controls: {                    playText: 'Play',                    stopText: 'Stop'                },                callbacks: {                    before: false,                    after: false                }            });        });    </script></body>  </html>
Output:
HTML-Questions
HTML-Tags
jQuery-Plugin
jQuery-Questions
Picked
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to get the value in an input text box using jQuery ?
jQuery | ajax() Method
How to prevent Body from scrolling when a modal is opened using jQuery ?
jQuery | removeAttr() with Examples
jQuery | parent() & parents() with Examples
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?