JSFiddle - React, Tailwind, and code Playground

by geekambassador

HTML

<script src="http://www.snorkl.tv/dev/libs/greensock/TweenMax.min.js"></script>
<script src="http://www.snorkl.tv/dev/libs/greensock/plugins/ColorPropsPlugin.min.js"></script>
<div class="perspective">
            <div class="crawl">
                <p>Episode IV<strong>A NEW HOPE</strong></p>
                <p>It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.</p>
                <p>During the battle, Rebel spies managed to steal secret plans to the Empire’s ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet.</p>
                <p>Pursued by the Empire’s sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy...</p>
            </div>
        </div>

CSS

.perspective {  position:absolute; z-index:1; top:0; left:50%; margin-left:-400px; width:800px; height:700px; overflow: visible;
    -webkit-transform: perspective(300) rotateX(45deg);
    -webkit-transform-style: preserve-3d;
    -moz-perspective:300px;
    -moz-transform: rotateX(45deg);
    -moz-transform-style: preserve-3d;
    
    overflow:hidden;
}

.crawl { padding-top:0px; position:absolute; z-index:10; top:430px; font-size:60px;}

body{
background-color:black;
color:rgb(252,223,43);
}

JavaScript

TweenLite.to($('.crawl'), 30, {css:{top:-2600}, ease:Linear.easeNone
                              });