Codeconvey
  • Home
  • Tutorials
    • CSS Slideshow
    • CSS Navigation
    • Modal & Popup
    • Hover Effects
    • HTML Forms
    • Layout
  • CSS Animation
  • How To
  • Resources
No Result
View All Result
Codeconvey
No Result
View All Result

Vertical Scrolling News Ticker HTML

Muhammad Asif by Muhammad Asif
June 19, 2022
in CSS Slideshow
1
Vertical Scrolling News Ticker HTML
0
SHARES
0
VIEWS
Share on FacebookShare on Twitter

A news ticker is one of the useful elements on a webpage to navigate the site’s content. It automatically scrolls the list of links in the horizontal or vertical directions. The movements of these links attract the user’s attention and give them a quick link to newly added content. This tutorial explains how to create a vertical scrolling news ticker using HTML and CSS.

Basically, the news ticker may contain links to featured posts or the latest added content on a website. It is not limited to implementing a news ticker on a news or magazine webpage. You can integrate on any online portal to allow users to navigate your site through a news ticker. So, the main purpose of a news ticker is to attract the user’s attention without the inconvenience of scrolling.

Before getting started with coding, have a look at a quick video preview. You can also browse the demo page to see the auto vertical scrolling effect in action.

Video Preview

https://codeconvey.com/wp-content/uploads/2022/06/vertical-scrolling-news-ticker-html.webm

The background color, links size and color can be customized according to your needs. So, let’s get started with HTML to create a news ticker.

The HTML for Vertical Scrolling News Ticker

In HTML, create a ul element with a unique id "news-alerts" and a class name "news-alert-list". Inside the ul, place your news/posts links, wrap all these elements into a div tag, and define its class name "news-alerts holder".

<div class="news-alerts holder">
  <ul id="news-alerts" class="news-alert-list">
    <li><a href="#">The first thing that most Javascript programmers</a></li>
    <li><a href="#">End up doing is adding some code</a></li>
    <li><a href="#">The code that you want to run</a></li>
    <li><a href="#">Inside of which is the code that you want to run</a></li>
    <li><a href="#">Right when the page is loaded</a></li>
    <li><a href="#">Problematically, however, the Javascript code</a></li>
    <li><a href="#">The first thing that most Javascript programmers</a></li>
    <li><a href="#">End up doing is adding some code</a></li>
    <li><a href="#">The code that you want to run</a></li>
    <li><a href="#">Inside of which is the code that you want to run</a></li>
    <li><a href="#">Right when the page is loaded</a></li>
    <li><a href="#">Problematically, however, the Javascript code</a></li>
  </ul>
</div>

Place the above HTML structure where you want to display a vertical scrolling news ticker. You can also place images/thumbnails or other HTML elements along with the links.

The CSS Styles

The "news-alerts" is the container class for the news ticker. Select it in CSS and define the background, color max-width, margin, and padding property. Here, the essential things to consider are height and overflow property.

We need a fixed height with hidden overflow in which the news content can be scrolled. So, specify 300px height and set the hidden value for overflow. Besides this, you can set a border and additional CSS for this container in order to customize it according to your needs.

.news-alerts {
    background: #8E0E00;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #1F1C18, #8E0E00);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #1F1C18, #8E0E00); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color: #fff;
    width: 100%;
    max-width: 720px;
    margin: 10px auto;
    height: 300px;
    padding: 15px;
    overflow: hidden;
    background-color: #fff;
    border: 1px solid #ccc;
    font-family: "Archivo", sans-serif;
}

After that, select the ul element of the "news-alerts" class and define the none value for the list-style property to remove the list bullets. Likewise, define the 0 value for the margin and padding to remove the default spacing. As we want to animate list items, so define the relative position,

.news-alerts ul {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

Similarly, target the li element with reference to ul and new-alerts class. Define 10px 0px value for the padding property to leave some space from the top and bottom of the list items.

.news-alerts ul li {
    padding: 10px 0px;
}

Now, target the hyperlinks (the a tag of li that child element of ul and news-alerts class). Define the color and font size according to your needs. In order to remove the default link underline, use the CSS text-decoration property with none value.

.news-alerts ul li a {
    color: rgba(255, 255, 255, 0.80);
    font-size: 18px;
    text-decoration: none;
}

In the same way, target the a element with the hover pseudo-selector and define color and text decoration as follows:

.news-alerts ul li a:hover {
    color: rgba(255, 255, 255, 1);
    text-decoration: underline;
}

Scrolling News Ticker JS Function

After creating the HTML for the news ticker and styling it with CSS, now it’s time to functionalize it with JavaScript. To do so, we’ll use the jQuery (a JavaScript library) and a vertical scrolling news ticker function. So, load the jQuery by adding the following CDN link before closing the body tag.

<!-- jQuery -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

Finally, include the following jQuery "liScroll" function between the <script> and </script> tag after the above CDN link.

jQuery.fn.liScroll = function (settings) {
  settings = jQuery.extend(
    {
      travelocity: 0.03
    },
    settings
  );
  return this.each(function () {
    var $strip = jQuery(this);
    $strip.addClass("newsticker");
    var stripHeight = 1;
    $strip.find("li").each(function (i) {
      stripHeight += jQuery(this, i).outerHeight(true); // thanks to Michael Haszprunar and Fabien Volpi
    });
    var $mask = $strip.wrap("<div class='mask'></div>");
    var $tickercontainer = $strip
      .parent()
      .wrap("<div class='tickercontainer'></div>");
    var containerHeight = $strip.parent().parent().height(); //a.k.a. 'mask' width
    $strip.height(stripHeight);
    var totalTravel = stripHeight;
    var defTiming = totalTravel / settings.travelocity; // thanks to Scott Waye
    function scrollnews(spazio, tempo) {
      $strip.animate({ top: "-=" + spazio }, tempo, "linear", function () {
        $strip.css("top", containerHeight);
        scrollnews(totalTravel, defTiming);
      });
    }
    scrollnews(totalTravel, defTiming);
    $strip.hover(
      function () {
        jQuery(this).stop();
      },
      function () {
        var offset = jQuery(this).offset();
        var residualSpace = offset.top + stripHeight;
        var residualTime = residualSpace / settings.travelocity;
        scrollnews(residualSpace, residualTime);
      }
    );
  });
};

$(function () {
  $("ul#news-alerts").liScroll();
});

That’s all! I hope, you have successfully created a vertical scrolling news ticker in your HTML project. If you have any questions or suggestions, let me know by comment below. Happy coding 😊

Tags: News Ticker
Demo Download
Previous Post

Onclick Button Loading Animation CSS

Next Post

CSS Show Hide div on Click without JavaScript

Next Post
CSS Show Hide div on Click without JavaScript

CSS Show Hide div on Click without JavaScript

Comments 1

  1. Kumar says:
    3 weeks ago

    How do i keep re-running this until the data changes

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Subscribe More Tutorials

Subscribe to our mailing list to receives monthly updates direct to your inbox!

You might also like

CSS Flip Animation on Hover – Flipping Card

CSS Flip Animation on Hover – Flipping Card

January 7, 2020
CSS Percentage Circle

Pure CSS Percentage Circle With Animation

January 21, 2023
3D Cube Image Rotator using CSS3 Animation

3D Cube Image Rotator using CSS3 Animation

August 21, 2020
Hexagonal CSS Grid

Auto Adjustable Hexagonal CSS Grid

December 17, 2019
Codeconvey

© 2023 Codeconvey.com - All rights reserved.

Navigate Site

  • Home
  • About Us
  • Contact us
  • License
  • Disclaimer
  • DMCA
  • Terms & Conditions

Follow Us

No Result
View All Result
  • Home
  • CSS Animation
  • CSS Navigation
  • HTML Forms
  • Hover Effects
  • CSS Slideshow
  • Layout
  • Modal & Popup
  • How To
  • Resources

© 2023 Codeconvey.com - All rights reserved.