Send Me Something Special to my channel Subscribe
Home
animation
JavaScript

Custom Cursor Using CSS & Vanilla JavaScript



Change Cursor on Hover using CSS & Vanilla Javascript

Change Cursor on Hover using CSS & Vanilla Javascript | Mouse Cursor Effects Today we are going to take a look at different ways we can use the cursor to interact with our website. We will be writing custom CSS and javascript to create some animations.


❤ SUBSCRIBE: https://www.youtube.com/c/codeopacity

Html & Javascript Code:



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom cursor</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="content">
        <p>Custom</p>
        <h1>Mousemove Cursor</h1>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum rem odio et. Minima consequatur illum porro tenetur minus. Error, maiores culpa magni molestias tenetur eum? Itaque temporibus nobis excepturi cupiditate.</p>
    </div>
    <!--Cursor Part-->
    <div class="cursor-outer"></div>
    <div class="cursor-inner"></div>
    <script>
        const cursor = document.querySelector(".cursor-inner");
        const cursor2 = document.querySelector(".cursor-outer");
        document.addEventListener("mousemove", e=>{
            cursor.style.top = e.pageY + "px";
            cursor.style.left = e.pageX + "px";
 
            cursor2.style.top = e.pageY + "px";
            cursor2.style.left = e.pageX + "px";
        })
    </script>
</body>
</html>
</pre>



Css Code:



*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: Open Sans,sans-serif;
    height: 100vh;
    background: #000;
    color: #fff;
    display: grid;
    place-items: center;
    cursor: none;
}
.content{
    margin: 200px;
}
.content h1{
    font-size: 6rem;
    margin: 0;
}
.content p{
    font-size: 18px;
    line-height: 1.7;
}
/*Cursor Start*/
[class^="cursor"]{
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    z-index: 9999;
    pointer-events: none;
}
.cursor-outer{
    width: 50px;
    height: 50px;
    border: 1px solid #fff;
    transition: all .08s ease-out;
}
.cursor-inner{
    width: 7px;
    height: 7px;
    background: #fff;
}
.content:hover ~ .cursor-outer{
    width: 90px;
    height: 90px;
    background: #fff;
    mix-blend-mode: difference;
}
.content:hover ~ .cursor-inner{
    opacity: 0;
}




Subscribe My Channel For Further Content

Post a Comment

© ‧ Code Opacity. All rights reserved. Distributed by ASThemesWorld