[TEG] Simple Smooth Marquee Like Content Scrolling In Vanilla JavaScript

TEG Marquee Make content slide beautifully across the screen with variable sizes of scrolling elements, in any of four directions, and pauses while the mouse is over the marquee, all with vanilla JavaScript.

marquee continuous scroll without gap in html, scrolling text in html without marquee, smooth marquee jquery, jquery horizontal marquee, marquee infinite loop css

How to make use of it:

1. Bind JavaScript and CSS into the <head> element of the page.

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

2. Create a list of items for the scrolling device.

<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 EGMarquee in the upper container.

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

4. Start scrolling.

TEGMUp.doScroll();

5. Select the scroll direction.

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

6. Set animation duration.

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

7. Specify the number of milliseconds to wait before the scrolling animation starts initially.

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

8. Set the value of the CSS property of the move and timing function.

window.TEGMUp = new TEGMarquee({
  marqueeSelector : '#example',
  timing : 'ease-in-out',
});

9. Specifies whether to pause the scrolling animation when the mouse hovers.

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();

Options

A marquee is configured by a closure of option properties provided as a parameter for the constructor.

OptionTypeDefaultDescription
marqueeSelectorString'#marquee'CSS selector to find the marquee container
directionStringTEGMarquee.D_UP

direction of scroll, must be one of

TEGMarquee.D_UP
TEGMarquee.D_RIGHT
TEGMarquee.D_DOWN
TEGMarquee.D_LEFT

durationNumber3move the scrolling item the calculated distance in this many seconds, CSS transition-duration
delayNumber0

the number of milliseconds to wait before initially starting the scrolling animations

NOTE: this is not a css transition-delay or animation-delay value (which is in seconds) but a setTimeout() count in milliseconds.

timingString'linear'

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(nnnn)' – lets you define your own values in a cubic-bezier function

mousePauseBooleantrueif true, hovering the mouse over the marquee will pause the scroll

 

Constants

ConstantTypeValueDescription
D_DOWNString'bottom'configures the marquee to scroll downwards
D_LEFTString'left'configures the marquee to scroll to the left
D_RIGHTString'right'configures the marquee to scroll to the right
D_UPString'top'configures the marquee to scroll upwards
DIRECTIONSString[][TEGMarquee.D_UP, TEGMarquee.D_RIGHT, TEGMarquee.D_DOWN, TEGMarquee.D_LEFT]array of available directions, for convenience

Properties

OptionTypeDescription
optionsClosurevalues to configure the marquee behavior, see Options above
marqueeContainerHTMLElementthe DOM node which contains the scrolling items
marqueeContentsTEGMElement[]an array of the scrolling items, see TEGMElement above
directionone of TEGMarquee.DIRECTIONSthe direction of scroll
durationNumberthe number of seconds to traverse the calculated scroll distance
delayNumber

the number of milliseconds to wait before initially starting the scrolling animations

NOTE: this is not a css transition-delay or animation-delay value (which is in seconds) but a setTimeout() count in milliseconds.

timingString

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(nnnn)' – lets you define your own values in a cubic-bezier function

scrollDistanceNumber

the number of pixels each scrolling item will move in a single iteration of the animation

This value is the height of the tallest item for vertical scrolling or the width of the widest item for horizontal scrolling.

lastItemTEGMElementthe last item in the list of scrolling elements as defined by direction, see TEGMElement above
isRunningBooleantrue if the marquee is scrolling
isVerticalBooleantrue if the marquee’s direction is TEGMarquee.D_UP or TEGMarquee.D_DOWN

Marquee-like Content Scrolling, TEG Marquee Plugin/Github, marquee behaviour in html


See Demo And Download

Official Website(pbjTEG): Click Here

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

Share