console
'use strict';
class Utils {
constructor() {
this.windowW = $(window).width();
this.windowH = $(window).height();
}
}
var utils = new Utils();
class App {
constructor() {
this.ball = document.getElementById("ball");
this.body = document.querySelector("body");
}
init() {
this.ballTaking = false;
this.ball.addEventListener("mousedown", this.takeBall.bind(this));
this.ball.addEventListener("mouseup", this.releaseBall.bind(this));
this.body.addEventListener("mousemove", this.dragBall.bind(this));
console.log(this.ball);
}
takeBall(e) {
this.ballTaking = true;
}
dragBall(e) {
let width = (100 - (Math.abs(parseInt((e.pageX - utils.windowW / 2) * 100 / utils.windowW)))) / 100;
let height = (100 - (Math.abs(parseInt((e.pageY - utils.windowH / 2) * 100 / utils.windowH)))) / 100;
let x = Math.round(e.pageX - utils.windowW / 2);
let y = Math.round(e.pageY - utils.windowH / 2);
let t = x / y;
let r = -Math.round(Math.atan(t) * 180 / Math.PI);
if (this.ballTaking) {
TweenLite.to(this.ball, 0, {
left: e.pageX,
top: e.pageY,
scaleX: (width + height) / 2,
rotation: r
});
}
}
releaseBall(e) {
this.ballTaking = false;
TweenLite.to(this.ball, 2, {
left: "50%",
top: "50%",
scaleX: 1,
ease: Elastic.easeOut
});
}
}
var app = new App();
app.init();
<div id="ball">
</div>
body {
overflow: hidden;
background-color: #fa1a4a;
height: 100vh;
width: 100vw;
}
#ball {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background-color: white;
cursor: all-scroll;
border-radius: 50%;
}