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

Issue with React Toggle functionality on mobile devices

Designing a fixed bottom footer enclosed within a wrapper that expands from the top header to the bottom footer

Accessing the parent scope from a directive within a nested ng-repeat in AngularJs

Experiencing a missing handlebars helper error when utilizing a helper within partials in express-handlebars

Creating an HTML table layout: A step-by-step guide

`A brief disruption in loading the visual style of Google Maps`

Background image color not displaying correctly

I am facing an issue where the HTML button is not properly interacting with the JavaScript function

What is causing my reusable component to malfunction when used in conjunction with the "setInterval" function?

Basic AngularJS application, however I am receiving {{this is supposed to be the information}}

What is preventing WebRTC from re-establishing connection after being disconnected?

It appears that the font in style.css is not being updated properly and seems to resemble

Changing the background color completely

Hiding an HTML image element by setting its display to none will prevent it from being visible if later changed to block display

Sending the image's identification number as a parameter to a function and showing the total number

Issue with parsing JSON values in a Chrome extension

What are some ways to reduce the delay of Dark mode on a website?

Adding custom styles to an unidentified child element in React using Material-UI

Console is displaying a Next.js error related to the file path _next/data/QPTTgJmZl2jVsyHQ_IfQH/blog/post/21/.json

Syntax Error Unearthed: Identifier Surprise Discovered in (Javascript, ASP.NET MVC, CSHTML)