CODEWITHSUNDEEP
javascript
Simon R.
Simon R.

Reputation: 151

JS: Add easing to moving element

I'm working on a site with one central element and I would like for this element to interact with the cursor. This is what I have so far:

var hello = document.getElementsByClassName("hello");
document.onmousemove = function() {
  var x = event.clientX * 100 / window.innerWidth + "%";
  var y = event.clientY * 100 / window.innerHeight + "%";

  for(var i=0;i<hello.length;i++) {
    hello[i].style.left = x;
    hello[i].style.top = y;
    hello[i].style.transform = "translate(-" + x + ",-" + y + ")";
  }
}
* {
  padding: 0;
  margin: 0;
}

body {
  background-color: black;
}

.hello_wrapper_wrapper {
  position: absolute;
  background-color: none;
  /* background-color: blue */
  width: 35vw;
  /* This object has to be larger than: width: 300px; height: 150px; */
  height: 35vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hello_wrapper {
  position: relative;
  background-color: none;
  width: 35vw;
  height: 35vh;
}

.hello {
  position: absolute;
  background-color: white;
  width: 300px;
  height: 150px;
  text-align: center;
  line-height: 150px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<!doctype html>
<html lang="EN">

<head>
  <meta charset="UTF-8">
  <title> 0 </title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="hello_wrapper_wrapper">
    <div class="hello_wrapper">
      <div class="hello">
        Hello World!
      </div>
    </div>
  </div>
  <script src="script.js"></script>
</body>

</html>

Note: The main element is inside of a: wrapper (width: 35vw; height: 35vh;), the main element, called: hello has the following dimensions: hello (width: 300px; height: 150px;). – hello has to be bigger than the wrapper for this to work, so I would change the size of the preview-window, when looking at the fiddle.

I would like to add some sort of easing to the element, I don't want it to jump around or move too quickly, I would like for it to be a bit sluggish, follow the curser, but drag a little bit behind. Also, when the curser is not hovering over the page, the page is reloaded and the curser then enters the page, the box jumps and, again, I'd just like to make this more smooth.

I would very much appreciate it, if someone could help me with this. Thank you!

Credits: https://www.youtube.com/watch?v=AixAmLWzXYg (This is a tutorial I followed.)

Upvotes: 5

Views: 1027

Answers (2)

P.B.UDAY
P.B.UDAY

Reputation: 483

You can use CSS transition properties to make sure it is smooth.

I tried adding transition-delay: 10ms, transition-timing-function: ease to the hello element CSS. More info here: https://css-tricks.com/ease-out-in-ease-in-out/ and here https://www.w3schools.com/css/css3_transitions.asp

   * {
    padding: 0;
    margin: 0;
}

body {
    background-color: black;
}

.hello_wrapper_wrapper {
    position: absolute;
    
    background-color: none; /* background-color: blue */
    width: 35vw; /* This object has to be larger than: width: 300px; height: 150px; */
    height: 35vh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.hello_wrapper {
    position: relative;
    
    background-color: none;
    width: 35vw;
    height: 35vh;
}

.hello {
    position: absolute;
    
    background-color: white;
    width: 300px;
    height: 150px;
    text-align: center;
    line-height: 150px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition-delay: 10ms;
    transition-timing-function: ease;

    }

Now to make sure the box doesn't move you can try with onmouseout event listener on the body.

Try this javascript code to make the transition smooth when the mouse leaves the window:

var hello = document.getElementsByClassName("hello");


document.onmouseleave = function(){
for(var i=0;i<2;i++){
    hello[i].style.left = '50%';
    hello[i].style.top = '50%';
    hello[i].style.transform = "translate(-50%,-50%)";
  }
  document.removeEventListener('onmousemove')
    
}


document.onmouseenter = function(){
    setTimeout(function(){
  document.onmousemove = function(){
    var x = event.clientX * 100 / window.innerWidth + "%";
    var y = event.clientY * 100 / window.innerHeight + "%";
    
    for(var i=0;i<2;i++){
        hello[i].style.left = x;
        hello[i].style.top = y;
        hello[i].style.transform = "translate(-"+x+",-"+y+")";
    }
}
  },1000)
    
}

Upvotes: 2

NVRM
NVRM

Reputation: 13162

We can just use CSS transitions!.

Added as example transition: transform 0.6s cubic-bezier(0.32, 0, 0.67, 0) to your css. This one will bring back the element in the center 0.6s after a mouse move.

See https://easings.net/ for many examples of transitions.

Similar answer

var hello = document.getElementsByClassName("hello")[0];
document.onmousemove = function() {
  var x = event.clientX * 100 / window.innerWidth + "%";
  var y = event.clientY * 100 / window.innerHeight + "%";
  hello.style.left = x;
  hello.style.top = y;
  hello.style.transform = "translate(-" + x + ",-" + y + ")";
}
* {
  padding: 0;
  margin: 0;
}

body {
  background-color: black;
}

.hello_wrapper_wrapper {
  position: absolute;
  background-color: none;
  /* background-color: blue */
  width: 35vw;
  /* This object has to be larger than: width: 300px; height: 150px; */
  height: 35vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hello_wrapper {
  position: relative;
  background-color: none;
  width: 35vw;
  height: 35vh;
}

.hello {
  position: absolute;
  background-color: white;
  width: 300px;
  height: 150px;
  text-align: center;
  line-height: 150px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.6s cubic-bezier(0.32, 0, 0.67, 0)
}
<!doctype html>
<html lang="EN">

<head>
  <meta charset="UTF-8">
  <title> 0 </title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="hello_wrapper_wrapper">
    <div class="hello_wrapper">
      <div class="hello">
        Hello World!
      </div>
    </div>
  </div>
  <script src="script.js"></script>
</body>

</html>

Upvotes: 1

Related Questions