Performance

Description

Watch over a dozen scroll instances running smoothly in this demo.

Javascript Example

Below is the equivalent javascript code using the pure vanilla js version of SuperScroll. 

                                        
                                            
const speedMapping = [ "superslow",  "slow",  "medium",  "fast", "medium", "slow", "superslow" ];
let i = 0;
document.querySelectorAll( ".demo-scroll" ).forEach( ( scrollContainer ) => { 
    new SuperMarquee( scrollContainer, { "speed" : speedMapping[ i % 6 ] }  );
    i++:
});
                                            
                                    
                                        
                                            
<div class="demo-scroll demo-scroll-sm"></div>
<div class="demo-scroll demo-scroll-md"></div>
<div class="demo-scroll demo-scroll-lg"></div>
<div class="demo-scroll demo-scroll-xl"></div>
<div class="demo-scroll demo-scroll-lg"></div>
<div class="demo-scroll demo-scroll-md"></div>
<div class="demo-scroll demo-scroll-sm"></div>
<div class="demo-scroll demo-scroll-md"></div>
<div class="demo-scroll demo-scroll-lg"></div>
<div class="demo-scroll demo-scroll-xl"></div>
<div class="demo-scroll demo-scroll-lg"></div>
<div class="demo-scroll demo-scroll-md"></div>
<div class="demo-scroll demo-scroll-sm"></div>
                                            
                                    
                                        
                                            
     .demo-scroll {
        color: #8089ff;        
     }
     
     .demo-scroll-sm {
        font-size: 16px;
     }
     
     .demo-scroll-md {
        font-size: 24px;
     }
     
     .demo-scroll-lg {
        font-size: 32px;
     }
     
     .demo-scroll-xl {
        font-size: 48px;
     }

jQuery Example

The demo above is constructed with the jQuery version of this library. See the code below to find out more. 

                                        
                                            
const speedMapping = [ "superslow",  "slow",  "medium",  "fast", "medium", "slow", "superslow" ];
$( ".demo-scroll" ).each( function( i ) {
    $( this ).supermarquee( { "speed" : speedMapping[ i % 6 ] } );
});
                                            
                                    
                                        
                                            
<div class="demo-scroll demo-scroll-sm"></div>
<div class="demo-scroll demo-scroll-md"></div>
<div class="demo-scroll demo-scroll-lg"></div>
<div class="demo-scroll demo-scroll-xl"></div>
<div class="demo-scroll demo-scroll-lg"></div>
<div class="demo-scroll demo-scroll-md"></div>
<div class="demo-scroll demo-scroll-sm"></div>
<div class="demo-scroll demo-scroll-md"></div>
<div class="demo-scroll demo-scroll-lg"></div>
<div class="demo-scroll demo-scroll-xl"></div>
<div class="demo-scroll demo-scroll-lg"></div>
<div class="demo-scroll demo-scroll-md"></div>
<div class="demo-scroll demo-scroll-sm"></div>
                                            
                                    
                                        
                                            
     .demo-scroll {
        color: #8089ff;        
     }
     
     .demo-scroll-sm {
        font-size: 16px;
     }
     
     .demo-scroll-md {
        font-size: 24px;
     }
     
     .demo-scroll-lg {
        font-size: 32px;
     }
     
     .demo-scroll-xl {
        font-size: 48px;
     }

 

BACK