Scroll Speed
Description
Changing the scroll speed on-the-fly can be easily done. This demo shows the basic scroll speed default values. Note, the scroll speed can be continuously adjusted with numeric values, too.
Javascript Example
Below is the equivalent javascript code using the pure vanilla js version of SuperScroll.
const mySuperMarquee = new SuperMarquee( document.getElementById( "supermarquee" ) );
document.querySelector( ".demo-button-container" ).addEventListener( "click", e => {
const { target } = e;
if ( target.classList.contains( "btn-primary" ) ) {
const oldBtn = document.querySelector( ".btn-light" );
oldBtn.classList.remove( "btn-light" );
oldBtn.classList.add( "btn-primary" );
target.classList.remove( "btn-primary" );
target.classList.add( "btn-light" );
mySuperMarquee.setScrollSpeed( target.innerHTML.toLowerCase() );
}
});
<div id="supermarquee"></div>
<div class="demo-button-container">
<button class="btn btn-primary">SUPERSLOW</button>
<button class="btn btn-primary">SLOW</button>
<button class="btn btn-light">MEDIUM</button>
<button class="btn btn-primary">FAST</button>
<button class="btn btn-primary">SUPERFAST</button>
</div>
#supermarquee {
color: #8089ff;
font-size: 48px;
}
.demo-button-container {
margin-top: 24px;
}
jQuery Example
The demo above is constructed with the jQuery version of this library. See the code below to find out more.
$( "#supermarquee" ).supermarquee();
$( ".demo-button-container" ).on( "click", ".btn-primary", function() {
$( ".btn-light" ).removeClass( "btn-light" ).addClass( "btn-primary" );
$( this ).removeClass( "btn-primary" ).addClass( "btn-light" );
$( "#supermarquee" ).supermarquee( "setScrollSpeed", $( this ).html().toLowerCase() );
});
<div id="supermarquee"></div>
<div class="demo-button-container">
<button class="btn btn-primary">SUPERSLOW</button>
<button class="btn btn-primary">SLOW</button>
<button class="btn btn-light">MEDIUM</button>
<button class="btn btn-primary">FAST</button>
<button class="btn btn-primary">SUPERFAST</button>
</div>
#supermarquee {
color: #8089ff;
font-size: 48px;
}
.demo-button-container {
margin-top: 24px;
}