Creating Custom Cursors - CSS Only, and JavaScript!
Why Stack Overflow recommends it
Stack Overflow users link it as the source tutorial for a follower-style custom cursor, usually when asking why their version lags, misbehaves on scroll, or conflicts with other page elements.
Recommended by 1 people across 1 different months, 2019 to 2020.
What it is
A 22-minute DesignCourse tutorial by Gary Simon on customizing the mouse cursor in the browser. It starts with a CSS-only cursor approach, then uses JavaScript to build a custom cursor element that follows the mouse, with animations and click effects.
What people said
Recommends ri20 · 2020-07 · Stack Overflow · on “custom cursor using querySelector lags in safari”
I followed this tutorial [this video] to have a shape that follows my cursor, this works great and runs smoothly in Chrome and Firefox but for some reason, in Safari it lags a lot. Here is an Imgur preview of what the two browsers look like [LINK] My javascript code <script> const cursor = document.querySelector('.cursor'); document.addEventListener('mousemove', e => { cursor.setAttribute("style", "top: "+(e.pageY - 10)+"px; left: "+(e.pageX - 10)+"px;") }) document.addEventListener('click', () => { cursor.classList.add("expand"); setTimeout(() => { cursor.classList.remove("expand"); }, 500) }) </script> My CSS .cursor { width: 25px; height: 25px; border: 3px solid #00AEC8; border-radius: 50%; po
Cites Randall · 2019-08 · Stack Overflow · on “ReactJS custom cursor effect:Cursor not working when user scroll”
Those days I watch in youtube great video [this video] how to create custom cursor CSS and JS. So I wrote this code in ReactJS and create almost similar custom cursor effect.But there and small bug when user scroll (without move mouse only scroll) my custom cursor not moving. Codesandbox [LINK] Please help how to solve this issue. state = { xMain: 0, yMain: 0, expand: false }; componentDidUpdate() { if (this.state.expand) { setTimeout(() => { this.setState({ expand: false }); }, 500); } } handleMouseMove = e => { const { pageX, pageY } = e; this.setState({ xMain: pageX, yMain: pageY }); }; expandCursor = () => { this.setState({ expand: true }); }; render = () => { const { xMain, yMain } = this.st
Cites Pranav Nair · 2020-04 · Stack Overflow · on “Why are my css3 animations so buggy in chrome and edge?”
So I've been working on a website, and it's my first attempt at web development. Now since I generally use Firefox, I started by drafting my website out on Firefox. Now I understand the Firefox is Gecko and Chrome and Edge are Webkit, hence there is likely to be some differences between them. All the animations and everything perform really well on Firefox- the custom cursor, the CSS marquee, virtually everything. Is my code just that badly written, or am I doing something wrong? /*kinda laggy cursor control js */ const cursor = document.querySelector('.cursor'); document.addEventListener('mousemove', e => { cursor.setAttribute("style", "top: " + e.pageY + "px; left: " + e.pageX + "px;") })
Cites david · 2020-11 · Stack Overflow · on “How to make a mouse trail with CSS/JS so that elements are still clickable?”
I‘d like to have a mouse trail when the mouse moves. The trail should be built out of small icons/images loosing capacity over time. (for simplicity I removed the capacity transition code in the demo) I tried to have this effect, creating a grid which lays on top of all other elements. This grid consists of small divs with a background-image. The opacity of every div is set to 0. Visually the solution works, but the elements on the whole page are not clickable any more. How is it possible to have the same visual effect and yet all elements on the page are still clickable? I tried to make the z-index of clickable elements higher than the z-index of the grid-elements. The elements are then cli