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;
}