TEG Marquee

Make the content slide prettily across the screen with variable sizes of scrolling items, in any of four directions, pausing while the mouse is over the marquee, and all with vanilla JavaScript.

Requires

Provided

Installation

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="https://foo.bar.com/path/to/files/TEGMarquee.css" type="text/css" />
  <script src="https://foo.bar.com/path/to/files/TEGMarquee.js" type="text/javascript"></script>

Create a new TEGMarquee object in a <script> element or external JavaScript file. 

window.TEGMUp = new TEGMarquee({
    marqueeSelector : '#marqueeUp',
    direction       : TEGMarquee.D_UP, // direction option defaults to "up" so this is not strictly necessary
  });

Finally, call doScroll() to start the scrolling.

TEGMUp.doScroll();

Options

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

Option Type Default Description
marqueeSelector String '#marquee' CSS selector to find the marquee container
direction String TEGMarquee.D_UP

direction of scroll, must be one of

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

duration Number 3 move the scrolling item the calculated distance in this many seconds, CSS transition-duration
delay Number 0

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.

timing String '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(n, n, n, n)' - lets you define your own values in a cubic-bezier function

mousePause Boolean true if true, hovering the mouse over the marquee will pause the scroll

Constants

Constant Type Value Description
D_DOWN String 'bottom' configures the marquee to scroll downwards
D_LEFT String 'left' configures the marquee to scroll to the left
D_RIGHT String 'right' configures the marquee to scroll to the right
D_UP String 'top' configures the marquee to scroll upwards
DIRECTIONS String[] [TEGMarquee.D_UP, TEGMarquee.D_RIGHT, TEGMarquee.D_DOWN, TEGMarquee.D_LEFT] array of available directions, for convenience

Properties

Option Type Description
options Closure values to configure the marquee behavior, see Options above
marqueeContainer HTMLElement the DOM node which contains the scrolling items
marqueeContents TEGMElement[] an array of the scrolling items, see TEGMElement above
direction one of TEGMarquee.DIRECTIONS the direction of scroll
duration Number the number of seconds to traverse the calculated scroll distance
delay Number

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.
timing String

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

scrollDistance Number

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.
lastItem TEGMElement the last item in the list of scrolling elements as defined by direction, see TEGMElement above
isRunning Boolean true if the marquee is scrolling
isVertical Boolean true if the marquee’s direction is TEGMarquee.D_UP or TEGMarquee.D_DOWN

Methods

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

Static Methods

scrollItem(marqueeObject: TEGMarquee, marqueeItem: TEGMElement)
begins a single iteration of a scrolling animation for a single item

Scrolling Element Class

TEGMElement

Wraps the HTMLElement of each scrolling item in a few convenience properties.

Constructor

new TEGMElement(newItem: HTMLElement, direction: String

The parameter direction must be one of TEGMarquee.DIRECTIONS above.

Properties

Shortcuts To HTMLElement Properties and Methods

TEGMElement provides the following shortcuts to the underlying HTMLElement object.

Unique Properties

element
the underlying HTMLElement
direction
the direction of scroll, one of TEGMarquee.DIRECTIONS above
id
a unique(ish) generated identifier string
lastRatio
the value of IntersectionObserverEntry.intersectionRatio from the previous run of the IntersectionObserver, if any
animationOffset

the distance in pixels from the scrolling element to the end of the marquee defined by the scrolling direction

For example, if the direction is TEGMarquee.D_RIGHT then the animationOffset is the distance in pixels from the right side of the scrolling element to the right side of the containing element.