45 lines
928 B
HTML
45 lines
928 B
HTML
<!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>
|