Mouse move animation using HTML, CSS & javaScript

Hello guys today we will learn Mouse move animation using HTML, CSS & javaScript

First we need to create two files index.html and style.css then we need to do code for it.

Step:1

Add below code inside index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>3D Animated humburger menu</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500&family=IBM+Plex+Serif:wght@300;400&display=swap" rel="stylesheet">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div class="moveheading-outer">
        <h2>Stackfindover</h2>
        <h2>Stackfindover</h2>
        <h2>Stackfindover</h2>
        <h2>Stackfindover</h2>
        <h2>Stackfindover</h2>
        <h2>Stackfindover</h2>
        <h2>Stackfindover</h2>
    </div>

    <script type="text/javascript">
        const h2s = document.querySelector('.moveheading-outer')
        window.addEventListener('mousemove', (evt) => {
            const x = -(window.innerWidth / 2 - evt.pageX) / 20
            const y = (window.innerHeight / 2 - evt.pageY + window.pageYOffset) / 20
            h2s.style.transform = `rotateY(${x}deg) rotateX(${y}deg)`
        })
    </script>
</body>
</html>

Step:2

Then we need to add code for style.css which code i provide in below screen.

* {
    padding: 0;
    margin: 0; 
    font-family: 'IBM Plex Sans', serif; 
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: #000;
}
.moveheading-outer {
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    z-index: 10000;
    position: relative;
}
h2 {
    font-size: 10rem;
    position: absolute;
    user-select: none;
    background: linear-gradient(45deg, rgb(25 10 255) 0%, rgb(1 148 255) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


h2:nth-child(1) {
    transform: translateZ(10px);
    filter: opacity(0.4) blur(1px);
}
h2:nth-child(2) {
    transform: translateZ(20px);
    filter: opacity(0.5) blur(2px);
}
h2:nth-child(3) {
    transform: translateZ(30px);
    filter: opacity(0.6) blur(3px);
}
h2:nth-child(4) {
    transform: translateZ(40px);
    filter: opacity(0.7) blur(4px);
}
h2:nth-child(5) {
    transform: translateZ(50px);
    filter: opacity(0.8) blur(5px);
}
h2:nth-child(6) {
    transform: translateZ(60px);
    filter: opacity(0.9) blur(6px);
}
h2:nth-child(7) {
    transform: translateZ(70px);
    background: -webkit-linear-gradient(135deg, #fff, #fff, #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

Output:

Leave a Comment