66 lines
1.5 KiB
HTML
66 lines
1.5 KiB
HTML
<!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>
|