Advertisement
Patrikrizek

lesson-8-js-custom-cursor

Nov 24th, 2022
780
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 1.04 KB | None | 0 0
  1.  
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>JS Custom Cursor</title>
  9.     <style>
  10.         .cursor {
  11.             box-shadow: 0 0 15px #00000033;
  12.             transform: translate(-50% -50%);
  13.             border: 1px solid #0000001a;
  14.             backdrop-filter: blur(3px);
  15.             background: #ffffff0d;
  16.             position: absolute;
  17.             border-radius: 50%;
  18.             aspect-ratio: 1;
  19.             z-index: 9;
  20.             width: 60px;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25.     <h2>JS Custom Cursor</h2>    
  26.     <div class="cursor"></div>
  27.    
  28.     <script>
  29.         const cursor = document.querySelector('.cursor');
  30.  
  31.         const animateCursor = (e) => {
  32.             cursor.style.left = `${e.pageX}px`;
  33.             cursor.style.top = `${e.pageY}px`;
  34.         }
  35.  
  36.         window.addEventListener('mousemove', animateCursor);
  37.     </script>
  38. </body>
  39. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement