Perspective X axis

Description

Use the inbuilt perspective transformation settings to create stunning 3D effects. This example shows how simple a starwars scroller can be created.

Javascript Example

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

                                        
                                            
    new SuperMarquee( 
        document.getElementById( "supermarquee" ), 
        { "type" : "vertical", "perspective" : "{\"z\": 400, \"rotateX\" : 30}" }
    );
                                            
                                    
                                        
                                            
    <div id="supermarquee"></div>
                                            
                                    
                                        
                                            
     #supermarquee {
        color: #8089ff;
        height: 200px;
        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.

                                        
                                            
$( "#supermarquee" ).supermarquee({
    "type" : "vertical",
    "perspective" : "{\"z\": 400, \"rotateX\" : 30}"
});
                                            
                                    
                                        
                                            
    <div id="supermarquee"></div>
                                            
                                    
                                        
                                            
     #supermarquee {
        color: #8089ff;
        height: 200px;
        font-size: 48px;
     }                                        
                                    

 

BACK