bachir
/
materio-base-d7


			
				
					
						
						
							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>