CODEWITHSUNDEEP
javascripthtmlcssdom
Cerej
Cerej

Reputation: 33

Fluency movement of the square with a mouse click

How to make a fluency movement of the square with the help of CSS when clicking the mouse. It is only necessary to move fluency , then the square goes beyond the rectangle, the task is not important.

let cube = document.querySelector('[id="cube"]');
let field = document.querySelector('[id="field"]');

field.onclick = function(event) {
  cube.style.left = event.clientX + 'px';
  cube.style.top = event.clientY + 'px';
}
#field {
  width: 200px;
  height: 150px;
  border: 10px groove black;
  overflow: hidden;
  cursor: pointer;
}

#cube {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
}
<div id="field">
  <img src="https://image.prntscr.com/image/ZfIPM5SZT9qpWY2xZAx3FQ.png" id="cube">
</div>

Upvotes: 3

Views: 94

Answers (4)

bluehipy
bluehipy

Reputation: 2294

I would do it like this:

let cube = document.querySelector('[id="cube"]');
let field = document.querySelector('[id="field"]');

field.onclick = function(event) {
  cube.style.transform = "translate(" + event.clientX + "px, " + event.clientY + "px)";
  cube.style['-webkit-transform'] = "translate(" + event.clientX + "px, " + event.clientY + "px)";
}
#field {
  width: 200px;
  height: 150px;
  border: 10px groove black;
  overflow: hidden;
  cursor: pointer;
}

#cube {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  transition-duration: 1s;
  transition-property: top left;
  -webkit-transition-duration: 1s;
  -webkit-transition-property: top left;
}
<div id="field">
  <img src="https://image.prntscr.com/image/ZfIPM5SZT9qpWY2xZAx3FQ.png" id="cube">
</div>

EDIT

I would not use the all as maybe other elements will require different parameters.

My sample misses the others browsers support, so add code for them as well: -moz-transition -o-transition -ms-transition

Upvotes: 0

kukkuz
kukkuz

Reputation: 42352

You can use a transition - see demo below when I added something like transition: all 1s linear; or it can be more specific like:

transition: top 1s linear, left 1s linear

You can check out the timing functions and use as appropriate.

See demo below using ease:

let cube = document.querySelector('[id="cube"]');
let field = document.querySelector('[id="field"]');

field.onclick = function(event) {
  cube.style.left = event.clientX + 'px';
  cube.style.top = event.clientY + 'px';
}
#field {
  width: 200px;
  height: 150px;
  border: 10px groove black;
  overflow: hidden;
  cursor: pointer;
}

#cube {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  transition: top 1s ease, left 1s ease;
}
<div id="field">
  <img src="https://image.prntscr.com/image/ZfIPM5SZT9qpWY2xZAx3FQ.png" id="cube">
</div>

Upvotes: 2

Whazam
Whazam

Reputation: 17

Yes, that's possible by adding transition:all .2s ease; to the cube's CSS.

let cube=document.querySelector('[id="cube"]');
let field=document.querySelector('[id="field"]');

field.onclick=function(event) {
  cube.style.left=event.clientX + 'px';
  cube.style.top=event.clientY + 'px';      
}
#field {
      width: 200px;
      height: 150px;
      border: 10px groove black;

      overflow: hidden;
      cursor: pointer;
}
#cube {
      position: absolute;
      left: 0;
      top: 0;
      width: 40px;
      height: 40px;
-webkit-transition: all .2s ease; 
-moz-transition: all .2s ease; 
-o-transition: all .2s ease; 
-ms-transition: all .2s ease; 
transition:all .2s ease;
}
<div id="field"> 
  <img src="https://image.prntscr.com/image/ZfIPM5SZT9qpWY2xZAx3FQ.png" id="cube"> 
</div>

Upvotes: 1

Aliaksandr Pitkevich
Aliaksandr Pitkevich

Reputation: 834

try inserting the code below into the CSS style for the #cube

-webkit-transition: all 1s; 
-moz-transition: all 1s; 
-o-transition: all 1s; 
-ms-transition: all 1s; 
transition: all 1s;

Upvotes: 1

Related Questions