No puedo hacer que el cursor personalizado funcione correctamente en HTML.

17 Jun, 2023 Programación 0

Estoy trabajando en un proyecto propio y estaba jugando con la idea de hacer un cursor personalizado para mi página web. Desafortunadamente, parece que no puedo hacer que funcione.

¿Alguien puede decirme qué estoy haciendo mal aquí? Estoy utilizando HTML, CSS y Javascript simples. Creo que es el Javascript lo que no está funcionando, pero he intentado usar un depurador y no tengo suerte.

<!DOCTYPE html>

<html lang="en">
    <head>
        <style>
            * {
                box-sizing: border-box;
                cursor: none;
            }

        body {
            background: #000;
            color: #fff;
        }
        a {
            color: #fff;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }
        .custom-cursor {
            position: fixed;
            top: -18px;
            left: -18px;
            display: block;
            width: 120px;
            height: 120px;
            pointer-events: none;
            will-change: transform;
            z-index: 998;
            -webkit-transform: matrix(1, 0, 0, 1, -100, -100);
            transform: matrix(1, 0, 0, 1, -100, -100);
            opacity: 0;
            mix-blend-mode: difference;

            transition: transform 0.15s cubic-bezier(0, 0.89, 0.49, 0.92),
                opacity 0.4s ease;
        }

        .custom-cursor .cursor {
            transform: scale(0.45);
            transition: transform 0.5s ease;
            will-change: transform;
            width: 120px;
            height: 120px;
            float: left;
            border-radius: 100%;
            margin-top: -40px;
            margin-left: -40px;
            background: #fff;
        }

        .custom-cursor.custom-cursor-active .cursor {
            -webkit-transform: scale(1);
            transform: scale(1);
            opacity: 1;
        }

        .custom-cursor.custom-cursor-active-img {
            z-index: 1010;
        }

        .custom-cursor.custom-cursor-active-img .cursor {
            -webkit-transform: scale(1);
            transform: scale(1);
            opacity: 1;
            background: #ff0;
        }
        body:hover .custom-cursor {
            opacity: 1;
        }

        @media screen and (max-width: 1200px) {
            .custom-cursor {
                display: none !important;
            }
        }

        .center {
            padding: 30vh;
            text-align: center;
            width: 100%;
            position: relative;
            z-index: 9999;
        }

        .content {
            padding: 1em;
            font-family: sans-serif;
            font-size: 3em;
            background: #000;
            min-height: 100vh;
        }

        .content::before {
            position: fixed;
            background: #ff0;
            mix-blend-mode: multiply;
            content: "";
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 999;
            pointer-events: none;
        }
        .img-wrapper {
            max-width: 450px;
            padding: 100px 0;
        }
        .img {
            position: relative;
            z-index: 1000;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="custom-cursor" data-custom-cursor="">
            <div class="cursor"></div>
        </div>

        <h1>hello world</h1>
        <a href="#">link 0</a> / <a href="#">link 1</a> /
        <a href="#">link 2</a> / <a href="#">link 3</a> /
        <a href="#">link 4</a> / <a href="#">link 5</a> /
        <a href="#">link 6</a> / <a href="#">link 7</a> /
        <a href="#">link 8</a> .
    </div>
    <script>
        const cursor = document.querySelector(".cursor");

        document.addEventListener("mousemove", (e) => {
            cursor.setAttribute(
                "style",
                "top: " + (e.pageY - 10) + "px; left: " + (e.pageX - 10) + "px;"
            );
        });

        var $c = $("[data-custom-cursor]");
        var $h = $("a, button");
        var $i = $("img");

        $(window).on("mousemove", function (e) {
            x = e.clientX;
            y = e.clientY;
            console.log(x, y);
            $c.css("transform", "matrix(1, 0, 0, 1, " + x + "," + y + ")");
        });

        $h.on("mouseenter", function (e) {
            $c.addClass("custom-cursor-active");
        });

        $h.on("mouseleave", function (e) {
            $c.removeClass("custom-cursor-active");
        });

        $i.on("mouseenter", function (e) {
            $c.addClass("custom-cursor-active-img");
        });
        $i.on("mouseleave", function (e) {
            $c.removeClass("custom-cursor-active-img");
        });
        //# sourceURL=pen.js
    </script>
</body>
</html>

Answer

davy.ai

June 17, 2023 at 11:41 pm
Es difícil determinar exactamente qué no funciona sin más contexto o un mensaje de error específico. Sin embargo, aquí hay algunas sugerencias basadas en el código proporcionado:
- Asegúrese de que su código javascript esté rodeado de etiquetas <script> </script> dentro del archivo HTML.
- Verifique su consola en busca de cualquier mensaje de error que pueda impedir que su código javascript se ejecute correctamente.
- Confirme que ha importado jQuery si es necesario para que este código funcione correctamente.
- Verifique que todos los elementos requeridos (por ejemplo, el elemento .cursor) estén presentes en el archivo HTML y que se escriban correctamente.
- Asegúrese de estar haciendo referencia a los elementos correctos en su código javascript. Por ejemplo, al usar document.querySelector, verifique que el selector sea preciso y coincida con el (los) elemento (s) previsto (s).
Con estas sugerencias en mente, puede comenzar a solucionar los problemas de su código para ver dónde puede estar ocurriendo el problema.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

No puedo hacer que el cursor personalizado funcione correctamente en HTML.

Answer

davy.ai