done mousefollwer

8 months ago · c4e1425a8e
parent 5cb1e01669
commit c4e1425a8e
3 changed files with 32 additions and 1 deletions
--- a/sticky-navigation/index.html
+++ b/sticky-navigation/index.html
@ -7,6 +7,8 @@
    <title>Sticky Navigation</title>
  </head>
  <body>
    <div id="mousefollower"></div>
    <nav class="nav">
      <div class="container">
        <h1 class="logo"><a href="/index.html">My Website</a></h1>
--- a/sticky-navigation/script.js
+++ b/sticky-navigation/script.js
@ -8,3 +8,20 @@ function fixNav() {
        nav.classList.remove('active')
    }
 }
 var mouse = document.querySelector('#mousefollower');
 document.body.addEventListener('mousemove',(details)=>{
    var x = details.pageX;
    var y = details.pageY;
    console.log(y)
    mouse.style.transform = `translate(${x}px,${y}px)`
 })
 document.body.addEventListener('mouseenter',(details)=>{
    mouse.style.opacity = '1'
 })
 document.body.addEventListener('mouseleave',(details)=>{
    mouse.style.opacity = '0'
 })
--- a/sticky-navigation/style.css
+++ b/sticky-navigation/style.css
@ -115,3 +115,15 @@ body {
  line-height: 30px;
  letter-spacing: 1.2px;
 }
 #mousefollower{
  height: 20px;
  width: 20px;
  position: absolute;
  z-index: 999;
  mix-blend-mode: difference;
  border-radius: 50%;
  opacity: 0;
  transition: 0.1s;
  background-color: white;
 }