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; }