What is the method to track the movement of the mouse in the reverse direction?

Question

What is the method to track the movement of the mouse in the reverse direction?

I am looking to create a unique div that moves in the opposite direction of the mouse cursor within another div called .box. As the mouse moves, I want the red box to create a subtle parallax effect by slightly moving in the opposite direction. Instead of moving at the same speed as the mouse, I want the box to move just a little bit to achieve the desired effect. Additionally, I would like the box to be centered around the mouse cursor.

I have already implemented a script that allows the red box to follow the mouse cursor, but I am unsure of how to achieve the desired effect described above.

$(document).ready(function(){
  $('div.container').on('mousemove',function(e){
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        $('div.box').css({'left': x, 'top': y});
  });
});

http://codepen.io/anon/pen/zBrkGa

javascript jquery css

Answer 1

Answer №1

It might be worth trying to replace top with bottom and left with right to see if that resolves your issue, like so:

$('div.box').css({'right': x, 'bottom': y});

$(document).ready(function() {
  $('div.container').on('mousemove', function(e) {
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
    $('div.box').css({
      'right': x,
      'bottom': y
    });
  });
});

.container {
  margin: 0 auto;
  width: 300px;
  height: 300px;
  border: 1px #000 solid;
  position: relative;
}
.box {
  width: 50px;
  height: 50px;
  border: 1px #000 solid;
  position: absolute;
  right: 200px;
  background: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
  <div class="box"></div>
</div>

Updated: Make sure that the box stays within a range of 100px with a slight delay

$(document).ready(function() {
  $('div.container').on('mousemove', function(e) {
    var x = (e.pageX - this.offsetLeft);
    var y = (e.pageY - this.offsetTop);
    if(x<100||x>200||y>200||y<100) return false;
    setTimeout(function() {
      $('div.box').css({
        'right': x,
        'bottom': y
      }).text(x+','+y);
    }, 500);
  });
});

.container {
  margin: 0 auto;
  width: 300px;
  height: 300px;
  border: 1px #000 solid;
  position: relative;
}
.box {
  width: 50px;
  height: 50px;
  border: 1px #000 solid;
  position: absolute;
  right: 200px;
  background: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
  <div class="box"></div>
</div>

Answer 2

It might be worth trying to replace top with bottom and left with right to see if that resolves your issue, like so:

$('div.box').css({'right': x, 'bottom': y});

$(document).ready(function() {
  $('div.container').on('mousemove', function(e) {
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
    $('div.box').css({
      'right': x,
      'bottom': y
    });
  });
});

.container {
  margin: 0 auto;
  width: 300px;
  height: 300px;
  border: 1px #000 solid;
  position: relative;
}
.box {
  width: 50px;
  height: 50px;
  border: 1px #000 solid;
  position: absolute;
  right: 200px;
  background: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
  <div class="box"></div>
</div>

Updated: Make sure that the box stays within a range of 100px with a slight delay

$(document).ready(function() {
  $('div.container').on('mousemove', function(e) {
    var x = (e.pageX - this.offsetLeft);
    var y = (e.pageY - this.offsetTop);
    if(x<100||x>200||y>200||y<100) return false;
    setTimeout(function() {
      $('div.box').css({
        'right': x,
        'bottom': y
      }).text(x+','+y);
    }, 500);
  });
});

.container {
  margin: 0 auto;
  width: 300px;
  height: 300px;
  border: 1px #000 solid;
  position: relative;
}
.box {
  width: 50px;
  height: 50px;
  border: 1px #000 solid;
  position: absolute;
  right: 200px;
  background: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
  <div class="box"></div>
</div>

Answer 3

Answer №2

$(document).ready(function(){
 $('div.container').mousemove(function(e){
  let mouseX = e.pageX;
  let mouseY = e.pageY;

   $(this).children('.box').css({
    'transform': 'translate(' + mouseX / -80 + 'px ,' + mouseY / -80 + 'px)
   })
  });
});

This code snippet uses negative numbers to make the object or div (.box) move in the opposite direction of your mouse

Answer 4

$(document).ready(function(){
 $('div.container').mousemove(function(e){
  let mouseX = e.pageX;
  let mouseY = e.pageY;

   $(this).children('.box').css({
    'transform': 'translate(' + mouseX / -80 + 'px ,' + mouseY / -80 + 'px)
   })
  });
});

This code snippet uses negative numbers to make the object or div (.box) move in the opposite direction of your mouse

What is the method to track the movement of the mouse in the reverse direction?

Answer №1

Answer №2

Similar questions

Optimal methods for creating large files using jQuery or Java

Eliminate spaces within a string using JavaScript

Vue select component not refreshing the selected option when the v-model value is updated

Troubleshooting automatic login problem in VB 2013 settings

What is the best way to handle responses in axios when dealing with APIs that stream data using Server-Sent Events (S

Upon transitioning from typescript to javascript

Why does pressing "enter" create a line break in HTML when typing?

Developing a Chrome browser extension tailored for parsing unique file formats

Combine object attributes to create a new column in a table

Is there a way to make my DIVS update their content dynamically like buttons do, without manually adding an onclick function in the HTML code?

What is the best way to generate a new div element when the content exceeds the preset height of the current div?

In what way can I utilize the request object within a promise that is nested?

What is the most effective way to add HTML from a dynamically loaded document using AJAX?

What is the best way to initiate a change event using JavaScript?

Removing information from the app.component.html file in Angular 6 and reflecting those updates in the view

Validating Form Inputs using JQuery and Bootstrap 4 to Enhance User Experience

How to resolve preventDefault issue on else condition during form submission in CoffeeScript on Rails 4

Is it necessary to clean and reinstall node_modules every time I deploy in a production environment?

Manipulate a value using JavaScript

Attempting to place my icon font in a higher position than my link to achieve a similar effect to the one I am currently experiencing with my