jjosserand/gist:d7aa095926f67f243eaea01f83c0e7d8

## gistfile1
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style type="text/css">

        body {
            background: black;
            color: yellow;
            font-family: Helvetica;
            text-transform: uppercase;
        }

        #titles {
            position: absolute;
            width: 18em;
            height: 50em;
            bottom: 0;
            left: 50%;
            margin-left: -9em;
            font-size: 350%;
            font-weight: bold;
            text-align: justify;
            overflow: hidden;
            -webkit-transform-origin: 50% 100%;
            -moz-transform-origin: 50% 100%;
            -o-transform-origin: 50% 100%;
            -ms-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
            -webkit-transform: perspective(300px) rotateX(25deg);
            -moz-transform: perspective(300px) rotateX(25deg);
            -o-transform: perspective(300px) rotateX(25deg);
            -ms-transform: perspective(300px) rotateX(25deg);
            transform: perspective(300px) rotateX(25deg);
        }

        #titles:after {
            position: absolute;
            content: ' ';
            left: 0;
            right: 0;
            top: 0;
            bottom: 60%;
            background-image: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
            background-image: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
            background-image: -o-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
            background-image: -ms-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
            background-image: linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
            //pointer-events: none;
        }

        #titlecontent {
            position: absolute;
            top: 100%;
            -webkit-animation: scroll 100s linear 4s infinite;
            -moz-animation: scroll 100s linear 4s infinite;
            -ms-animation: scroll 100s linear 4s infinite;
            -o-animation: scroll 100s linear 4s infinite;
            animation: scroll 100s linear 4s infinite;
        }

        @-webkit-keyframes "scroll" { 0% { top: 100%; } 100% { top: -170%; } }
        @-moz-keyframes "scroll" { 0% { top: 100%; } 100% { top: -170%; } }
        @-ms-keyframes "scroll" { 0% { top: 100%; } 100% { top: -170%; } }
        @-o-keyframes "scroll" { 0% { top: 100%; } 100% { top: -170%; } }
        @keyframes "scroll" { 0% { top: 100%; } 100% { top: -170%; } }

    </style>
</head>

<body>
    <div id="titles">
        <div id="titlecontent">
            <!-- start slipsum code -->

            <p>By Craig Buckler<br />
            <a href="http://www.sitepoint.com/css3-starwars-scrolling-text/" title="">Original article here</a></p>

            <p>My money's in that office, right? If she start giving me some bullshit about it ain't there, and we got to go someplace else and get it, I'm gonna shoot you in the head then and there. Then I'm gonna shoot that bitch in the kneecaps, find out where my goddamn money is. She gonna tell me too. Hey, look at me when I'm talking to you, motherfucker. You listen: we go in there, and that nigga Winston or anybody else is in there, you the first motherfucker to get shot. You understand? </p>

            <p>Now that there is the Tec-9, a crappy spray gun from South Miami. This gun is advertised as the most popular gun in American crime. Do you believe that shit? It actually says that in the little book that comes with it: the most popular gun in American crime. Like they're actually proud of that shit.  </p>

            <p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man. </p>

            <!-- please do not remove this line -->

            <div style="display:none;">
            <a href="http://slipsum.com">lorem ipsum</a></div>

            <!-- end slipsum code -->

        </div>
    </div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<style type="text/css">

	body {
	background: black;
	color: yellow;
	font-family: Helvetica;
	text-transform: uppercase;
	}

	#titles {
	position: absolute;
	width: 18em;
	height: 50em;
	bottom: 0;
	left: 50%;
	margin-left: -9em;
	font-size: 350%;
	font-weight: bold;
	text-align: justify;
	overflow: hidden;
	-webkit-transform-origin: 50% 100%;
	-moz-transform-origin: 50% 100%;
	-o-transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
	-webkit-transform: perspective(300px) rotateX(25deg);
	-moz-transform: perspective(300px) rotateX(25deg);
	-o-transform: perspective(300px) rotateX(25deg);
	-ms-transform: perspective(300px) rotateX(25deg);
	transform: perspective(300px) rotateX(25deg);
	}

	#titles:after {
	position: absolute;
	content: ' ';
	left: 0;
	right: 0;
	top: 0;
	bottom: 60%;
	background-image: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	background-image: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	background-image: -o-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	background-image: -ms-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	background-image: linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	//pointer-events: none;
	}

	#titlecontent {
	position: absolute;
	top: 100%;
	-webkit-animation: scroll 100s linear 4s infinite;
	-moz-animation: scroll 100s linear 4s infinite;
	-ms-animation: scroll 100s linear 4s infinite;
	-o-animation: scroll 100s linear 4s infinite;
	animation: scroll 100s linear 4s infinite;
	}

	@-webkit-keyframes "scroll" { 0% { top: 100%; } 100% { top: -170%; } }
	@-moz-keyframes "scroll" { 0% { top: 100%; } 100% { top: -170%; } }
	@-ms-keyframes "scroll" { 0% { top: 100%; } 100% { top: -170%; } }
	@-o-keyframes "scroll" { 0% { top: 100%; } 100% { top: -170%; } }
	@keyframes "scroll" { 0% { top: 100%; } 100% { top: -170%; } }

	</style>
	</head>

	<body>
	<div id="titles">
	<div id="titlecontent">
	<!-- start slipsum code -->

	<p>By Craig Buckler<br />
	<a href="http://www.sitepoint.com/css3-starwars-scrolling-text/" title="">Original article here</a></p>

	<p>My money's in that office, right? If she start giving me some bullshit about it ain't there, and we got to go someplace else and get it, I'm gonna shoot you in the head then and there. Then I'm gonna shoot that bitch in the kneecaps, find out where my goddamn money is. She gonna tell me too. Hey, look at me when I'm talking to you, motherfucker. You listen: we go in there, and that nigga Winston or anybody else is in there, you the first motherfucker to get shot. You understand? </p>

	<p>Now that there is the Tec-9, a crappy spray gun from South Miami. This gun is advertised as the most popular gun in American crime. Do you believe that shit? It actually says that in the little book that comes with it: the most popular gun in American crime. Like they're actually proud of that shit. </p>

	<p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man. </p>

	<!-- please do not remove this line -->

	<div style="display:none;">
	<a href="http://slipsum.com">lorem ipsum</a></div>

	<!-- end slipsum code -->

	</div>
	</div>
	</body>
	</html>