Skip to content

Instantly share code, notes, and snippets.

@iainnash

iainnash/gist:989a86dc0cbe37a55820

Created September 1, 2015 20:19
Show Gist options
  • Save iainnash/989a86dc0cbe37a55820 to your computer and use it in GitHub Desktop.
Save iainnash/989a86dc0cbe37a55820 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
var num = 0;
function scrollDec() { $('.slide').css({marginTop: '-' + $('.wrap').height()*(Math.abs(num--)%3) + 'px'}) }
function scroll() { $('.slide').css({marginTop: '-' + $('.wrap').height()*(num++%3) + 'px'}) }
setInterval(scroll, 2000);
</script>
<style>
* { margin: 0; padding: 0; width:100%;height:100%; }
.tile {
height:100%;
width:100%;
}
h1 {font-family:Helvetica;font-size:5em;}
.wrap {
width: 200px;
height: 200px;
overflow:hidden;
margin: 0 auto;
}
.slide {
margin-top: 00px;
transition: margin-top 0.9s ease-in-out;
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner">
<div class="slide">
<div class="tile" style="background:red">
test
</div>
<div class="tile" style="background:blue">
test
</div>
<div class="tile" style="background:green">
test
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment