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>
|