• Download

Class

Element

Fx

User Interface

Utilities

Widgets

 

Class: InfiniteTicker {#InfiniteTicker}

Scrolls an element with overflow infinitely by moving elements scrolled out of view back onto the other side of the element, to be scrolled back in to view later.

Demo

Extends:

Fx.Scroll

Implements:

Loop: view to see inherited methods.

Notes:

• Just like any Fx.Scroll effect, your element must have an overflow.
• Inherits all of Loops methods to start and stop.

InfiniteTicker Method: constructor {#InfiniteTicker:constructor}

Syntax:

var myInfiniteTicker = new InfiniteTicker(element, options);

Arguments:

1. element - (element) A string referencing the id of an element, or an element object.
2. options - (object) The Fx.Scroll options object plus the following:

Options:

• delay - (number: defaults to 4000) The time between scrolls.
• direction - (string: defaults to up) The direction to scroll. Accepts up, down, left, or right. (It actually scrolls the element the opposite direction.)
• autostart - (boolean: deafults to true) If true, will start progressing.
• childSelector - (string: defaults to false) A CSS selector to select the elements that determine the amount of scrolling per progression.
  • When left false, the children elements will be elected for up and down, and the grandchildren will be selected for left and right as you typically need an outer element to create a horizontal overflow.
  • When set, it will get the matched elements.

Example:

var myTicker = new InfiniteTicker('ticker',{
    duration: 1000,
    transition: 'quad:out',
    direction: 'down'
});

InfiniteTicker Method: progress {#InfiniteTicker:progress}

Progresses the effect one increment

Syntax:

myTicker.progress();
myTicker.toNext(); // backwards compatibility

Returns

This InfiniteTicker instance

InfiniteTicker Method: reverse {#InfiniteTicker:reverse}

Not very easy on the eyes, but allows you to reverse the direction of the effect. Might make this prettier in the future but it works.

Syntax:

myTicker.reverse();

Returns:

This InfiniteTicker instance