Styling

Description

You can style a SuperMarquee element just like any other HTML element. Watch the examples to see how easy you can add your individual styles with custom CSS

Javascript Example

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

                                        
                                            
    document.querySelectorAll( ".demo-scroll" ).forEach( ( scrollContainer ) => { 
        new SuperMarquee( scrollContainer );
    });
                                            
                                    
                                        
                                            
    <div class="demo-scroll scrollstyle1"></div>
    <div class="demo-scroll scrollstyle2"></div>
    <div class="demo-scroll scrollstyle3"></div>
                                            
                                    
                                        
                                            
    .scrollstyle1 {
        font-size: 20px;
        line-height: 30px;
        background-color: #8089ff;
        color: white;
    }


    .scrollstyle2 {
        font-size: 24px;
        line-height: 34px;
        letter-spacing: 10px;
        color: #fd81b5;
        font-family: "Monoton", cursive;
    }
    

    .scrollstyle3 {
        font-family: "Bungee Shade", cursive;
        font-size: 28px;
        line-height: 40px;        
        color: black;
    }

jQuery Example

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

                                        
                                            
    $( ".demo-scroll" ).supermarquee();
                                            
                                    
                                        
                                            
    <div class="demo-scroll scrollstyle1"></div>
    <div class="demo-scroll scrollstyle2"></div>
    <div class="demo-scroll scrollstyle3"></div>
                                            
                                    
                                        
                                            
    .scrollstyle1 {
        font-size: 20px;
        line-height: 30px;
        background-color: #8089ff;
        color: white;
    }


    .scrollstyle2 {
        font-size: 24px;
        line-height: 34px;
        letter-spacing: 10px;
        color: #fd81b5;
        font-family: "Monoton", cursive;
    }
    

    .scrollstyle3 {
        font-family: "Bungee Shade", cursive;
        font-size: 28px;
        line-height: 40px;        
        color: black;
    }

 

BACK