Marquee-like Content Scrolling – TEG Marquee

Category: Animation , Javascript | October 18, 2021
0 Comment
Demo Download
Author:pbjTEG
Views Total:237 views
Official Page:Go to website
Last Update:October 18, 2021
License:MIT

Preview:

Marquee-like Content Scrolling – TEG Marquee

Description:

A modern content scrolling JavaScript library that scrolls the content of an element just like the traditional <marquee /> element.

It allows you to scroll content up, down, left, or right with an unknown number of scrolling items and variable item size.

The best part is that the library uses IntersectionObserver to monitor marquee visibility for better performance.

How to use it:

1. Link the JavaScript and CSS in the <head> element of the page. Note that TEGMarquee.css is easily incorporated into your own CSS and not strictly necessary.

<link rel="stylesheet" href="TEGMarquee.css" />
<script src="TEGMarquee.js"></script>

2. Create a list of items for the scroller.

<ul id="example" class="marqueeContainer">
  <li id="First">
    Item 1
  </li>
  <li id="Second">
    Item 2
  </li>
  <li id="Third">
    Item 3
  </li>
  <li id="Fourth">
    Item 4
  </li>
  <li id="Fifth">
    Item 5
  </li>
</ul>

3. Initialize the EGMarquee on the top container.

window.TEGMUp = new TEGMarquee({
  marqueeSelector : '#example',
});

4. Start the scrolling. Done.

TEGMUp.doScroll();

5. Set the direction of the scroll, must be one of

  • TEGMarquee.D_UP (default)
  • TEGMarquee.D_RIGHT
  • TEGMarquee.D_DOWN
  • TEGMarquee.D_LEFT
window.TEGMUp = new TEGMarquee({
  marqueeSelector : '#example',
  direction : TEGMarquee.D_DOWN,
});

6. Set the duration of the animation. Default: 3 (seconds).

window.TEGMUp = new TEGMarquee({
  marqueeSelector : '#example',
  duration : 5,
});

7. Specify the number of milliseconds to wait before initially starting the scrolling animations. Default: 0.

window.TEGMUp = new TEGMarquee({
  marqueeSelector : '#example',
  delay : 2000,
});

8. Set the value for the transition-timing-function CSS property, must be one of

  • ‘linear’ – specifies a transition effect with the same speed from start to end (recommended and default)
  • ‘ease’ – specifies a transition effect with a slow start, then fast, then end slowly
  • ‘ease-in’ – specifies a transition effect with a slow start
  • ‘ease-out’ – specifies a transition effect with a slow end
  • ‘ease-in-out’ – specifies a transition effect with a slow start and end
  • ‘cubic-bezier(n, n, n, n)’ – lets you define your own values in a cubic-bezier function
window.TEGMUp = new TEGMarquee({
  marqueeSelector : '#example',
  timing : 'ease-in-out',
});

9. Determine whether to pause the scroll animation on mouse hover. Default: true.

window.TEGMUp = new TEGMarquee({
  marqueeSelector : '#example',
  mousePause : false,
});

10. More API methods.

// sets the initial position of a scrolling item based upon the location of lastItem and direction
TEGMUp.setStart(marqueeItem: TEGMElement);
// stops the scrolling animation
TEGMUp.pause();
// stops the scrolling animation
TEGMUp.play();

See Also:

You Might Be Interested In:

Leave a Reply