Press "Enter" to skip to content

Newsticker With Vertical, Horizontal, Rectangular, and Typewriter Effects | acmeticker

AcmeTicker – News Ticker is a very lightweight jQuery plugin for creating an advanced news feed.

Acmeticker is an easy-to-use jQuery plugin for creating horizontal or vertical news indicators using the next / prev/play/pause controls.

More advantages:

  • 4 types: horizontal, vertical, rectangular, and typewriter.
  • Autoplay and pause when scrolling and/or focusing.
  • Animation speed configurable.
  • Supports directions up / down and left / right.

How to make use of it:

1. Load the compiled stylesheet within the head part of the doc.

<link rel="stylesheet" href="/path/to/assets/css/style.css" />

2. Add your content along with the label & controls to the information ticker container.

<div class="acme-news-ticker">
  <div class="acme-news-ticker-label">News Ticker Label</div>
  <div class="acme-news-ticker-box">
    <ul class="my-news-ticker">
      <li>
        <a href="#">Breaking News 1</a>
      </li>
      <li>
        <a href="#">Breaking News 2</a>
      </li>
      <li>
        <a href="#">Breaking News 3</a>
      </li>
    </ul>
  </div>
  <div class="acme-news-ticker-controls acme-news-ticker-horizontal-controls">
    <span class="acme-news-ticker-arrow acme-news-ticker-prev"></span>
    <span class="acme-news-ticker-pause"></span>
    <span class="acme-news-ticker-arrow acme-news-ticker-next"></span>
  </div>
</div>

3. Load the principle JavaScript acmeticker.js after the jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/assets/js/acmeticker.js"></script>

4. Initialize the information ticker and allow the controls.

$('.my-news-ticker').AcmeTicker({
  controls: {
    prev: $('.acme-news-ticker-prev'),
    toggle: $('.acme-news-ticker-pause'),
    next: $('.acme-news-ticker-next')
  }
});

5. Determine the information ticker sort.

$('.my-news-ticker').AcmeTicker({
  type: 'horizontal'
});

6. Determine the autoplay interval.

$('.my-news-ticker').AcmeTicker({
  autoplay: 2000
});

7. Determine the animation speed.

$('.my-news-ticker').AcmeTicker({
  speed: 50
});

8. Determine the course of the information ticker. Default: up/down/left/right.

$('.my-news-ticker').AcmeTicker({
  direction: 'up'
});

9. Determine whether or not to pause the information ticker on focus or hover.

$('.my-news-ticker').AcmeTicker({
  pauseOnFocus: true,
  pauseOnHover: true
});

Feature-rich News Ticker With Controls, AcmeTicker – News Ticker Plugin/Github, news ticker design, breaking news ticker plugin, best news ticker, flash news ticker, react news ticker, news ticker sample


See Demo And Download

Official Website(addonspress): Click Here

This superior jQuery/javascript plugin is developed by addonspress. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

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