Pausing up-down Scroller
Note (Dec 21 16'): Script completely rewritten for various improvements.
Description: As its name suggests, this is a up-down scroller that pauses between each message! Responsive and supporting of percentage widths, the scroller uses CSS3 animations for buttery smooth, mobile optimized animations (with fallback for IE9 browsers). Pause/resume and update the scroller contents on demand. With no JavaScript library dependencies, this is one lean mean scroller script!
Demo:
Step 1: Insert the below code in the <head> section of your page:
The code references two external files, which you should by default upload to the same directory as where the scroller page resides:
Step 2: Then, inside the BODY section of your page, to display a scroller, simply use the below example code:
The code of Step 2 illustrates how to display a pausing scroller on your page. First, define an empty DIV where you wish the scroller to be housed:
<div id="pscroller1" class="pausescroller"> </div>
The CSS class should always be set to pausescroller
. Then
following this DIV, initialize the scroller by calling the new
pausescroller()
constructor function:
<script type="text/javascript"> //new pausescroller(message_array, CSS_ID, pause_in_ms, slideeffect_in_ms) var scroller1 = new pausescroller(pausecontent, "pscroller1", 2000, 1500) </script>
The function should be passed the following parameters:
message_array
: The name of the JavaScript array of messages to show. Inside the code of Step 1 we've defined two sample message arrays.CSS_ID
: The ID of the DIV that will show this scroller instance.pause_in_ms
: The pause between message changes, in milliseconds.slideeffect_in_ms
: The duration of the slide up effect, in milliseconds.
When invoking new pausescroller()
, assign it to an arbitrary but
unique variable to access its methods later, in the above case, variable "scroller1
".
Pausing Scroller methods
method | Description |
scrollerinstance.pause() |
Pauses the scroller. |
scrollerinstance.resume() |
Resumes playing the scroller. |
scrollerinstance.populate(array) |
Re-populates the scroller with the contents defined inside the JavaScript array entered. |