zerobias · September 30, 2018 16:14
diff --git a/cursorball.css b/cursorball.css
 p{padding-left:60px;}
 #foo{
 border-radius:50px;
 width:50px;
 height:50px;
 background:#c00;
 position:absolute;
 top:0;
 left:0;
 transition: transform 1s;  
 }
diff --git a/cursorball.html b/cursorball.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>transition cursor ball</title>
    <link href="/cursorball.css" rel="stylesheet">
  </head>
  <body>
    <p>Click anywhere to move the ball</p>
    <div id="foo"></div>
    <script src="/cursorball.js"></script>
  </body>
 </html>
diff --git a/cursorball.js b/cursorball.js
 const f = document.getElementById('foo');
 document.addEventListener('click', function(ev){
    f.style.transform = 'translateY('+(ev.clientY-25)+'px)';
    f.style.transform += 'translateX('+(ev.clientX-25)+'px)';
 },false);
	<!DOCTYPE html>
	<html>
	<head>
	<title>transition cursor ball</title>
	<link href="/cursorball.css" rel="stylesheet">
	</head>
	<body>
	<p>Click anywhere to move the ball</p>
	<div id="foo"></div>
	<script src="/cursorball.js"></script>
	</body>
	</html>
	const f = document.getElementById('foo');
	document.addEventListener('click', function(ev){
	f.style.transform = 'translateY('+(ev.clientY-25)+'px)';
	f.style.transform += 'translateX('+(ev.clientX-25)+'px)';
	},false);