What methods can be used to modify the appearance of the cursor depending on its position?

Question

What methods can be used to modify the appearance of the cursor depending on its position?

Is there a way to change the cursor to a left arrow when on the left half of the screen and switch it to a right arrow when on the right half, using JavaScript? I am trying to achieve something similar to what is shown on this website.

I attempted to accomplish this by tracking mouse location and comparing it to the page width (e.g. if x-mouse location > page width: change cursor to right). However, my previous efforts have been unsuccessful.

Do you have any suggestions on how to make this work?

javascript html css

Answer 1

Answer №1

To eliminate all animations, you can follow these steps:

* {
  margin: 0;
}

body {
  background-color: #111;
}

.container {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.image {
  height: 60vh;
  width: 60vw;
  background-image: url("https://source.unsplash.com/cUpp1gAEtiU/");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  
  /* 👇👇 This is important 👇👇 */
  cursor: url("https://i.stack.imgur.com/314qF.png"), auto;
}

<div class="container">
  <div class="image"></div>
</div>

Answer 2

To eliminate all animations, you can follow these steps:

* {
  margin: 0;
}

body {
  background-color: #111;
}

.container {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.image {
  height: 60vh;
  width: 60vw;
  background-image: url("https://source.unsplash.com/cUpp1gAEtiU/");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  
  /* 👇👇 This is important 👇👇 */
  cursor: url("https://i.stack.imgur.com/314qF.png"), auto;
}

<div class="container">
  <div class="image"></div>
</div>

Answer 3

Answer №2

The website you mentioned is structured with nested divs, where the innermost div triggers an image display on mouse hover.

You have the option to create a similar setup:

    .left,
    .right {
      display: none;
      position: fixed;
      height: 85%;
      width: 51vw;
      cursor: none!important;
      .left .inner,
      .right .inner {
        position: relative;
        height: 100%;
        width: 100%;
      }

<html>
  <body>
    <div class='left'>
      <div class='inner'>
        <img src="https://example.com/image.jpg" style="left: 395px; top: 369.062px;">
      </div>
    </div>
 </body>
</html>

It's worth noting that the concept and design of this was inspired by

Answer 4

The website you mentioned is structured with nested divs, where the innermost div triggers an image display on mouse hover.

You have the option to create a similar setup:

    .left,
    .right {
      display: none;
      position: fixed;
      height: 85%;
      width: 51vw;
      cursor: none!important;
      .left .inner,
      .right .inner {
        position: relative;
        height: 100%;
        width: 100%;
      }

<html>
  <body>
    <div class='left'>
      <div class='inner'>
        <img src="https://example.com/image.jpg" style="left: 395px; top: 369.062px;">
      </div>
    </div>
 </body>
</html>

It's worth noting that the concept and design of this was inspired by

Answer 5

Answer №3

In my recent project, I implemented a JavaScript code to track the mouse position on the page and apply corresponding classes to an element based on its location.

const wrap = document.querySelector('.wrap');

addEventListener('mousemove', e => {
  // Calculating the center of the page
  const width = +getComputedStyle(document.body).width.slice(0, -2) / 2;

  wrap.classList.remove('mouse-left', 'mouse-right'); // Removing previous mouse classes
  wrap.classList.toggle('mouse-left', e.pageX <= width); // Adding mouse-left class if mouse is on the left side
  wrap.classList.toggle('mouse-right', e.pageX > width); // Adding mouse-right class if mouse is on the right side
});

body {
  background-image: linear-gradient(to right, #8360c3 49.9%, #2ebf91 50%);
  width: 100%;
  height: 100%;
}

.wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

.mouse-right {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🚀</text></svg>") 16 0, auto;
}

.mouse-left {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🎮</text></svg>") 16 0, auto;
}

<div class="wrap"><div>

Answer 6

In my recent project, I implemented a JavaScript code to track the mouse position on the page and apply corresponding classes to an element based on its location.

const wrap = document.querySelector('.wrap');

addEventListener('mousemove', e => {
  // Calculating the center of the page
  const width = +getComputedStyle(document.body).width.slice(0, -2) / 2;

  wrap.classList.remove('mouse-left', 'mouse-right'); // Removing previous mouse classes
  wrap.classList.toggle('mouse-left', e.pageX <= width); // Adding mouse-left class if mouse is on the left side
  wrap.classList.toggle('mouse-right', e.pageX > width); // Adding mouse-right class if mouse is on the right side
});

body {
  background-image: linear-gradient(to right, #8360c3 49.9%, #2ebf91 50%);
  width: 100%;
  height: 100%;
}

.wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

.mouse-right {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🚀</text></svg>") 16 0, auto;
}

.mouse-left {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🎮</text></svg>") 16 0, auto;
}

<div class="wrap"><div>

What methods can be used to modify the appearance of the cursor depending on its position?

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to extract additional values linked to the query within the array?

Tips for hiding a popover in Angular when clicking outside of it

Fixed position scrollable tabs with Material UI

Bootstrap does not display unordered lists (<ul>) or ordered lists (<ol>)

Angular's observable function is not providing a complete response

What is preventing my boolean from being altered?

Hover Effect for Bootstrap Gallery

Angular Translate - Utilizing translate-values attribute for translation

Transforming vanilla JavaScript into jQuery

Extracting information from HTML and transferring it to Javascript using jQuery

Guide to uploading a recorded audio file (Blob) to a server using ReactJS

Javascript: recursive function fails to return existing value

Disable, Hide, or Remove Specific Options in a Single Dropdown Selection

Node.js Monitoring Statistics Displayed in Command Line Interface

Implementing Bootstrap 3 mobile design by necessity

If the next element in the sequence happens to be the final element, then conceal a separate

Unable to get Bootstrap IMG-RESPONSIVE to function properly in Firefox and IE within the navbar

Show the time in hours and minutes (00:00) while rounding off seconds to the nearest minute

Guide to adding a Json file in a PHP file with PHP

"Challenges with Full-Width Dropdowns in Multi-level Mega Menus