Glass Effect Follow Mouse: HTML CSS Java Script @rayen-code

Rayen

Glass Effect Follow Mouse: HTML CSS Java Script



HTML Code

<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glass Follow Mouse</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div id="image"></div>
    <div id="glass"></div>

    
    <script src="main.js"></script>
</body>
</html>

CSS Code

/*-------------------- CSS --------------------*/
/* style  */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#image{
    background: url(https://source.unsplash.com/1400x900/?color); /* add a image as you like */
    height: 80vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#glass{
    position: fixed;
    width: 200px;
    height: 200px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.632);
    border-radius: 10px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.184), rgba(255, 255, 255, 0));
    /* top: 100px; */
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.165);
    transform: translate(-50%, -50%);
    pointer-events: none;
    display: none;
}

CSS Code

//-------------------- Java Script --------------------//
// java script 

let image = document.getElementById("image");
let glass = document.getElementById("glass");

document.addEventListener("mousemove", (mouse) =>{
    glass.style.left = mouse.pageX + "px"
    glass.style.top = mouse.pageY + "px"
});


image.addEventListener("mouseenter", ()=>{
    glass.style.display = "inline"
});
image.addEventListener("mouseleave", ()=>{
    glass.style.display = "none"
});

0 Comments