docgalaxyblock/chaospott-site
1
0
Fork 0
forked from Chaospott/site
Code Pull Requests Activity

added external skrollr and first structure in index.html

Browse Source
This commit is contained in:
Van Fanel
2014-07-05 18:56:34 +02:00
parent 7d95d4c864
commit 2a4679207a
58 changed files with 7484 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
external/skrollr/examples/gradientsmotherfucker.html vendored Normal file
View File

@ -0,0 +1,65 @@
<!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>