Created
March 3, 2017 06:15
-
-
Save ericmustin/f163730db0320c9a8caf48fdf9110a3f to your computer and use it in GitHub Desktop.
fear_and_loathing_in_css
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> | |
| <style type="text/css"> | |
| body { | |
| height: 100%; | |
| margin: 5%; | |
| padding: 0; | |
| background: url('http://americanshortfiction.org/new/wp-content/uploads/2016/05/Nevada-Desert_narrow.jpg') no-repeat center center fixed; | |
| background-size: cover; | |
| background-color: hsla(0,0%,100%,0.45); | |
| background-blend-mode: overlay; | |
| line-height: 1.3; | |
| } | |
| .line { | |
| position: relative; | |
| /*float: left;*/ | |
| margin: 10px; | |
| font-size: calc(1.4vw + 1.4vh + .7vmin); | |
| text-align: left; | |
| transition: transform 60s ease-in 3s, color 30s ease-in 3s; | |
| font-family: Verdana; | |
| font-color: #777; | |
| font-weight: bold; | |
| } | |
| .trippingOne { | |
| transform: translateX(-3%) translateY(4%) rotate(-8deg) translateZ(50px); | |
| color: #3FBF7F; | |
| } | |
| .trippingTwo { | |
| transform: translateX(9%) translateY(-3%) rotate(20deg) translateZ(-20px); | |
| color: #7F3FBF; | |
| } | |
| .trippingThree { | |
| transform: translateX(1%) translateY(10%) rotate(-4deg) translateZ(6px); | |
| color: #8C7A72; | |
| } | |
| .trippingFour { | |
| transform: translateX(-10%) translateY(-6%) rotate(-18deg) translateZ(50px); | |
| color: #F79F5F; | |
| } | |
| .trippingFive { | |
| transform: translateX(-20%) translateY(-10%) rotate(33deg) translateZ(-10px); | |
| color: #88BDD8; | |
| } | |
| .trippingSix { | |
| transform: translateX(13%) translateY(20%) rotate(45deg) translateZ(-18px); | |
| color: #FBE7B3; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <p class="line one">We were somewhere around Barstow on the edge of the desert when the drugs began to take hold.</p> | |
| <p class="line two">I remember saying something like "I feel a bit lightheaded; maybe you should drive..."</p> | |
| <p class="line three">And suddenly there was a terrible roar all around us and the sky was full of what looked like huge bats,</p> | |
| <p class="line four">all swooping and screeching and diving around the car,</p> | |
| <p class="line five">which was going about a hundred miles an hour with the top down to Las Vegas.</p> | |
| <p class="line six">And a voice was screaming: "Holy Jesus! What are these goddamn animals?"</p> | |
| <script type="text/javascript"> | |
| $(document).ready(function() { | |
| var addClasses = function() { | |
| $('.one').addClass("trippingOne"); | |
| $('.two').addClass("trippingTwo"); | |
| $('.three').addClass("trippingThree"); | |
| $('.four').addClass("trippingFour"); | |
| $('.five').addClass("trippingFive"); | |
| $('.six').addClass("trippingSix"); | |
| setTimeout(removeClasses, 60000) | |
| } | |
| var removeClasses = function() { | |
| $('.one').removeClass("trippingOne"); | |
| $('.two').removeClass("trippingTwo"); | |
| $('.three').removeClass("trippingThree"); | |
| $('.four').removeClass("trippingFour"); | |
| $('.five').removeClass("trippingFive"); | |
| $('.six').removeClass("trippingSix"); | |
| setTimeout(addClasses, 60000) | |
| } | |
| addClasses() | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment