Perspective dynamic

Description

This example shows how easy the perspective settings can be updated dynamically on-the-fly.

Javascript Example

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

                                        
                                            
let lastTime = (new Date()).getTime(),
    currentTime = 0,
    counter = 0;
    
const myScroller =  new SuperMarquee( 
        document.getElementById( "supermarquee" ), 
        { "type" : "horizontal", "perspective" : "{\"z\": 400, \"rotateY\" : 60}" }
    );   

function loop() {
    window.requestAnimationFrame( loop );
    currentTime = ( new Date() ).getTime();
    delta = ( currentTime - lastTime ) / 2000;   
    myScroller.setPerspective( "{ \"rotateY\" : " + 60 * Math.sin( delta ) + "}" ); 
}

loop();        
                                            
                                    
                                        
                                            
    <div id="supermarquee"></div>
                                            
                                    
                                        
                                            
     #supermarquee {
        color: #8089ff;
        font-size: 48px;
        overflow: hidden;
     }

jQuery Example

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

                                        
                                            
let lastTime = (new Date()).getTime(),
    currentTime = 0,
    counter = 0;

$( "#supermarquee" ).supermarquee({
    "type" : "horizontal", "perspective" : "{\"z\": 400, \"rotateY\" : 60}"
});

function loop() {
    window.requestAnimationFrame( loop );
    currentTime = ( new Date() ).getTime();
    delta = ( currentTime - lastTime ) / 2000;
   
   $( "#supermarquee" ).supermarquee( "setPerspective", "{ \"rotateY\" : " + 60 * Math.sin( delta ) + "}" ); 
} 

loop();
                                            
                                    
                                        
                                            
    <div id="supermarquee"></div>
                                            
                                    
                                        
                                            
     #supermarquee {
        color: #8089ff;
        font-size: 48px;
        overflow: hidden;
     }

 

BACK