Skip to content

Instantly share code, notes, and snippets.

@nola

nola/test3.html

Created August 2, 2013 20:18
Show Gist options
  • Save nola/6143105 to your computer and use it in GitHub Desktop.
Save nola/6143105 to your computer and use it in GitHub Desktop.
Download ZIP
Spinning Boxes
Raw
test3.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.1/TweenMax.min.js"></script>
<script>
$(function(){
var blocks = $(".one, .two, .three, .four");
tl = new TimelineMax({paused: true});
tl.to($(".one"), 1, {rotationZ:360, transformOrigin:"0% 100% 100px"})
.to($(".two"), 1, {rotationZ:360, transformOrigin:"100% 0% 100px"}, 0)
.to($(".three"), 1, {rotationZ:360, transformOrigin:"100% 100% 100px"}, 0)
.to($(".four"), 1, {rotationZ:360, transformOrigin:"0% 0% 100px"}, 0)
.staggerTo(blocks, 1, {left:50},0)
$(window).scroll(function(){
var progress = tl.totalProgress();
var pct = $(this).scrollTop() / ($(document).height() - $(window).height());
tl.progress(pct);
console.log(pct);
});
$('div').click(function(){
tl.play();
});
});
</script>
<style>
body{height: 2000px;}
div{
height: 100px;
width: 100px;
position: fixed;
}
.one{
top: 33%;
left: 50%;
background-color: red;
}
.two{
top: 50.8%;
left: 41.5%;
background-color: blue;
}
.three{
top: 33%;
background-color: green;
left: 41.5%;
}
.four{
top: 50.8%;
left: 50%;
background-color: black;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment