1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
- <title>What’s the best way to appease Samuel L. Jackson’s design-lust?</title>
- <style type="text/css">
- html, body {
- padding:0;
- margin:0;
- width:100%;
- height:100%;
- background-attachment:fixed;
- color:#fff;
- font-family:sans-serif;
- text-align:center;
- }
- a {color:#eee;}
- #top {padding-top:10em;}
- #bottom {
- position:fixed;
- right:0;
- bottom:0;
- left:0;
- }
- #bottom > img {
- display:block;
- margin:auto;
- }
- .hidden {display:none;}
- </style>
- </head>
- <body data-0="background-image:linear-gradient(0deg, hsl(0, 100%, 50%), hsl(40, 50%, 50%));" data-5000="background-image:linear-gradient(3600deg, hsl(360, 100%, 50%), hsl(400, 100%, 50%));">
- <div id="skrollr-body">
- <div id="top">
- <h1>What’s the best way to appease Samuel L. Jackson’s design-lust?</h1>
- <p>Scroll to find out</p>
- <p>↓</p>
- </div>
- </div>
- <div id="bottom" data-500-end="opacity:0;" data-end="opacity:1;">
- <h1>Rotating gradients, motherfucker</h1>
- <p>Inspired by: <a href="http://gradientsmotherfucker.com/">http://gradientsmotherfucker.com/</a></p>
- <p>Created with: <a href="https://github.com/Prinzhorn/skrollr">skrollr</a></p>
- <img src="images/slj.png" />
- </div>
- <script type="text/javascript" src="../dist/skrollr.min.js"></script>
- <script type="text/javascript">
- skrollr.init();
- </script>
- </body>
- </html>
|