Slide Ticker

Slide Ticker

The maxiumum character length for this effect is 25 characters (including spaces).

During the effect you can click anywhere to close it early.

Roseworx components have a scanDOM method which basically rescans the DOM for roseworx components and instantiates them. This is extremely useful for when you are dynamically / conditionally adding components to a page after the page load event or using Javascript frameworks like React or Vue. Simply run rwxSlideshows.scanDOM().

Description

The Roseworx Slide Ticker Component splits a specified string into seperate characters and animates them in on intervals with a neat wiggle effect on top of a fading in background. The effect can be closed at anytime by clicking anywhere.

Usage
  • import rwxSlideTicker from 'roseworx/js/components/rwxSlideTicker';
  • Import the SCSS file and optionally customize using the below SCSS variables (make sure to declare them before the import);
    @import "~roseworx/scss/components/rwxSlideTicker";
  • rwxSlideTicker.setValue('{VALUE}');
Customize
SCSS Variable Value Type Description
$rwx-slide-ticker-background-color CSS color Backround color
$rwx-slide-ticker-text-color CSS color Text color