| 123456789101112131415161718192021222324252627282930313233343536373839404142434445 |
- <!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>
|
