<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Creating a circular motion (easing === awesome)</title>
<link href="fixed-positioning.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#thing {
width:32px;
height:32px;
border-radius:16px;
background:#000;
}
</style>
</head>
<body>
<div id="thing" data-0="left[cos]:10%;top[sin]:10%;" data-10000="left:90%;top:90%;"></div>
<script type="text/javascript" src="../dist/skrollr.min.js"></script>
<script type="text/javascript">
skrollr.init({
easing: {
sin: function(p) {
return (Math.sin(p * Math.PI * 2 - Math.PI/2) + 1) / 2;
},
cos: function(p) {
return (Math.cos(p * Math.PI * 2 - Math.PI/2) + 1) / 2;
},
},
render: function(data) {
//Loop
if(data.curTop === data.maxTop) {
this.setScrollTop(0, true);
}
}
});
</script>
</body>
</html>