Skip to content
Snippets Groups Projects

Behind The Mask - demo cursor

  • Clone with SSH
  • Clone with HTTPS
  • Embed
  • Share
    The snippet can be accessed without any authentication.
    Authored by Nulo

    Esto nos permite tener un elemento HTML como cursor.

    index.html 603 B
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27 
    <!DOCTYPE html>
<style>
	body {
		min-width: 100vw;
		min-height: 100vh;
		cursor: none;
		margin: 0;
	}
	h1 {
		margin: 0;
	}
	#cursor {
		position: fixed;
		/* Desactivado porque lagea todo: transition: all 0.1s; */
		pointer-events: none;
		font-size: 3rem;
	}
</style>
<h1>hola mundo</h1>
<span id="cursor">❥</span>
<script>
	const cursorEl = document.querySelector("#cursor");
	document.body.addEventListener("mousemove", (event) => {
		cursorEl.style.top = `${event.clientY - cursorEl.clientHeight / 2}px`;
		cursorEl.style.left = `${event.clientX - cursorEl.clientWidth / 2}px`;
	});
</script>
    0% or .
    You are about to add 0 people to the discussion. Proceed with caution.
    Please register or to comment