site-deploy/external/skrollr/examples/gradientsmotherfucker.html

66 lines
1.5 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Whats the best way to appease Samuel L. Jacksons 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>Whats the best way to appease Samuel L. Jacksons 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>