A Pen by ThierryM

Thumbnail
This awesome code was written by Teri_Tetlsn, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Teri_Tetlsn ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  ThierryM</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="cur"></div>
<div class="test">test</div>
<div class="close">close</div>
<div class="plus">plus</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/Teri_Tetlsn/a-pen-by-thierrym-NXKYoM */
.cur{
  position: fixed;
  width: 3px;
  height: 3px;
  background:black;
  border-radius:50%;
  transition: .3s ease width,.3s ease height,.3s ease transform,0.3s ease border;
}
.cur::after{
  transition: .3s ease all;
  content:"";
  display: block;
  width: 3px;
  height: 3px;
  transform: rotate(90deg);
  background: black;
  border-radius:3px;
}
/* .cur.bigCur{
  width: 10px;
  height: 10px;
  border: 2px black solid;
  background: rgba(0,0,0,0.4);
} */
.cur.closeCur{
  background: black;
  width: 50px;
  border-radius:3px;
  transform: rotate(-45deg);
}
.cur.closeCur:after{
  width: 50px;
}
.cur.closeCur.bigCur{
  width: 20px;
  transform: rotate(-75deg);
}
.cur.closeCur.bigCur:after{
  width: 20px;
  transform: rotate(90deg);
}
.cur.plusCur{
  background: black;
  width: 20px;
  border-radius:3px;
}
.cur.plusCur:after{
  width: 20px;
}

.close{
  width: 100%;
  background:red;
  opacity: 0.1;
  height: 3em;
}
.plus{
  background:cyan;
  height: 3em;
}
*{
    cursor: none !important;
}

/*Downloaded from https://www.codeseek.co/Teri_Tetlsn/a-pen-by-thierrym-NXKYoM */
var mouse = {
  left:0,
  top:0
}
var abst = {
  left:0,
  top:0
}
var cur = {
  left: 0,
  top: 0
}
$(document).mousemove(function(event){
  mouse.left = event.pageX;
  mouse.top = event.pageY;
  
  $(".test").html("x:"+mouse.left+"<br>y:"+mouse.top);
  
});

$(document).mousedown(function(){
  $(".cur").addClass("bigCur");
});
$(document).mouseup(function(){
  $(".cur").removeClass("bigCur");
});

function animation(e) {
    abst.left = mouse.left-cur.left;
  abst.top = mouse.top-cur.top;
  
  cur.left += abst.left*0.1;
  cur.top += abst.top*0.1;
  $(".cur").offset(cur);
  
if(collision($(".cur"),$(".close"))){
  $(".cur").addClass("closeCur");
  $(".cur").removeClass("plusCur");
}else if(collision($(".cur"),$(".plus"))){
  $(".cur").addClass("plusCur");
  $(".cur").removeClass("closeCur");
}else{
  $(".cur").removeClass("closeCur");
  $(".cur").removeClass("plusCur");
}
  
   requestAnimationFrame(animation);
}
requestAnimationFrame(animation);

function collision($div1, $div2) {
  var x1 = $div1.offset().left;
  var y1 = $div1.offset().top;
  var h1 = $div1.outerHeight(true);
  var w1 = $div1.outerWidth(true);
  var b1 = y1 + h1;
  var r1 = x1 + w1;
  var x2 = $div2.offset().left;
  var y2 = $div2.offset().top;
  var h2 = $div2.outerHeight(true);
  var w2 = $div2.outerWidth(true);
  var b2 = y2 + h2;
  var r2 = x2 + w2;

  if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
  return true;
}

Comments