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
@ -7,4 +7,21 @@ function fixNav() {
    } else {
        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;
+}