Custom cursor added

feove · Aug 27, 2024 · b63623f · b63623f
1 parent 6fde99f
commit b63623f
Show file tree

Hide file tree

Showing 5 changed files with 260 additions and 24 deletions.
diff --git a/index.html b/index.html
@@ -10,6 +10,7 @@
 
     <link rel="stylesheet" href="style/navbar.css">
     <link rel="stylesheet" href="style/style-home.css">
+    <link rel="stylesheet" href="/style/custom-cursor.css">
 
 
 </head>
@@ -18,6 +19,8 @@
 
 </style>
 <body>
+    <div class="cursor"></div>
+    <div class="cursor2"></div>
     <div class="black-background">
         <section>
             <div class="parallax">
@@ -247,7 +250,43 @@ <h2>Qu'est ce que TreasHunt ?</h2>
 
 
 
+
 
+        var cursor = document.querySelector('.cursor');
+        var cursorinner = document.querySelector('.cursor2');
+        var a = document.querySelectorAll('a');
+
+        document.addEventListener('mousemove', function(e){
+        var x = e.clientX;
+        var y = e.clientY;
+        cursor.style.transform = `translate3d(calc(${e.clientX}px - 50%), calc(${e.clientY}px - 50%), 0)`
+        });
+
+        document.addEventListener('mousemove', function(e){
+        var x = e.clientX;
+        var y = e.clientY;
+        cursorinner.style.left = x + 'px';
+        cursorinner.style.top = y + 'px';
+        });
+
+        document.addEventListener('mousedown', function(){
+        cursor.classList.add('click');
+        cursorinner.classList.add('cursorinnerhover')
+        });
+
+        document.addEventListener('mouseup', function(){
+        cursor.classList.remove('click')
+        cursorinner.classList.remove('cursorinnerhover')
+        });
+
+        a.forEach(item => {
+        item.addEventListener('mouseover', () => {
+            cursor.classList.add('hover');
+        });
+        item.addEventListener('mouseleave', () => {
+            cursor.classList.remove('hover');
+        });
+        })
     </script>
 </body>
 </html>
diff --git a/index/about.html b/index/about.html
@@ -6,6 +6,7 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald|Noto+Sans">
     <link rel="stylesheet" type="text/css" href="../style/style-about.css">
     <link rel="stylesheet" type="text/css" href="../style/navbar.css">
+    <link rel="stylesheet" href="../style/custom-cursor.css">
     <title>A propos</title>
 
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
@@ -15,7 +16,8 @@
 </head>
 <body>
 
-
+    <div class="cursor"></div>
+    <div class="cursor2"></div>
     <div class="parallax">
 
         <img src="../media/mount.png" class="layer" id="sky" alt="sky">
@@ -347,15 +349,53 @@ <h2>Remastérisation</h2>
                 $('.timeline::before').css('height', filledHeight + '%');
             }
 
-            // Appel initial et écouteur d'événement sur le scroll
+
             $(window).on('scroll', function() {
                 updateTimelineBar();
             });
 
-            // Appel initial pour mettre à jour la barre au chargement de la page
+
             updateTimelineBar();
         });
 
+
+
+        var cursor = document.querySelector('.cursor');
+        var cursorinner = document.querySelector('.cursor2');
+        var a = document.querySelectorAll('a');
+
+        document.addEventListener('mousemove', function(e){
+        var x = e.clientX;
+        var y = e.clientY;
+        cursor.style.transform = `translate3d(calc(${e.clientX}px - 50%), calc(${e.clientY}px - 50%), 0)`
+        });
+
+        document.addEventListener('mousemove', function(e){
+        var x = e.clientX;
+        var y = e.clientY;
+        cursorinner.style.left = x + 'px';
+        cursorinner.style.top = y + 'px';
+        });
+
+        document.addEventListener('mousedown', function(){
+        cursor.classList.add('click');
+        cursorinner.classList.add('cursorinnerhover')
+        });
+
+        document.addEventListener('mouseup', function(){
+        cursor.classList.remove('click')
+        cursorinner.classList.remove('cursorinnerhover')
+        });
+
+        a.forEach(item => {
+        item.addEventListener('mouseover', () => {
+            cursor.classList.add('hover');
+        });
+        item.addEventListener('mouseleave', () => {
+            cursor.classList.remove('hover');
+        });
+        })
+
    </script>
 
 

diff --git a/index/download.html b/index/download.html
@@ -7,11 +7,13 @@
     <link rel="stylesheet" type="text/css" href="../style/style-download.css">
     <link rel="stylesheet" type="text/css" href="../style/navbar.css">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="../style/custom-cursor.css">
     <title>Téléchargement</title>
 
 </head>
 <body>
-
+    <div class="cursor"></div>
+    <div class="cursor2"></div>
     <header>
         <div class="logo-bg">
             <div class="logo-container">
@@ -123,34 +125,73 @@ <h3>Rapport De Projet</h3>
     </script>
 <script>
 
-const revealText = document.querySelector('.download-button')
+    const revealText = document.querySelector('.download-button')
 
-window.addEventListener('scroll', () => {
+    window.addEventListener('scroll', () => {
 
-    const { scrollTop, clientHeight} = document.documentElement;
+        const { scrollTop, clientHeight} = document.documentElement;
 
-    const deltaTop = revealText.getBoundingClientRect().top;
+        const deltaTop = revealText.getBoundingClientRect().top;
 
-    if (scrollTop > (scrollTop + deltaTop).toFixed() *0.3) {
-        revealText.classList.add('active');
-    }
-})
+        if (scrollTop > (scrollTop + deltaTop).toFixed() *0.3) {
+            revealText.classList.add('active');
+        }
+    })
 
- let forest = document.getElementById('hole');
- let bords = document.getElementById('plaines');
- let gamedownload = document.getElementById('GameDownlaod');
- let originalWidth = forest.offsetWidth;
- let lastScrollY = 0;
+    let forest = document.getElementById('hole');
+    let bords = document.getElementById('plaines');
+    let gamedownload = document.getElementById('GameDownlaod');
+
+
+    let lastScrollY = 0;
 
- window.addEventListener('scroll', function() {
-    let currentScrollY = window.scrollY;
-    if (gamedownload){
+    window.addEventListener('scroll', function() {
+        let currentScrollY = window.scrollY;
+        if (gamedownload){
 
-        gamedownload.style.top *= 0.1;
-    }
-
+            gamedownload.style.top *= 0.1;
+        }
+    
 
- });
+    });
+
+
+
+    var cursor = document.querySelector('.cursor');
+    var cursorinner = document.querySelector('.cursor2');
+    var a = document.querySelectorAll('a');
+
+    document.addEventListener('mousemove', function(e){
+    var x = e.clientX;
+    var y = e.clientY;
+    cursor.style.transform = `translate3d(calc(${e.clientX}px - 50%), calc(${e.clientY}px - 50%), 0)`
+    });
+
+    document.addEventListener('mousemove', function(e){
+    var x = e.clientX;
+    var y = e.clientY;
+    cursorinner.style.left = x + 'px';
+    cursorinner.style.top = y + 'px';
+    });
+
+    document.addEventListener('mousedown', function(){
+    cursor.classList.add('click');
+    cursorinner.classList.add('cursorinnerhover')
+    });
+
+    document.addEventListener('mouseup', function(){
+    cursor.classList.remove('click')
+    cursorinner.classList.remove('cursorinnerhover')
+    });
+
+    a.forEach(item => {
+    item.addEventListener('mouseover', () => {
+        cursor.classList.add('hover');
+    });
+    item.addEventListener('mouseleave', () => {
+        cursor.classList.remove('hover');
+    });
+    })
 
 
 </script>

diff --git a/index/leaderboard.html b/index/leaderboard.html
@@ -10,8 +10,11 @@
 
     <link rel="stylesheet" href="../style/navbar.css">
     <link rel="stylesheet" href="../style/style-leaderboard.css">
+    <link rel="stylesheet" href="../style/custom-cursor.css">
 </head>
 <body>
+    <div class="cursor"></div>
+    <div class="cursor2"></div>
     <header>
         <div class="logo-bg">
             <div class="logo-container">
@@ -156,9 +159,41 @@ <h1>Top Speedruns Leaderboard</h1>
         });
 
 
+        var cursor = document.querySelector('.cursor');
+        var cursorinner = document.querySelector('.cursor2');
+        var a = document.querySelectorAll('a');
 
+        document.addEventListener('mousemove', function(e){
+        var x = e.clientX;
+        var y = e.clientY;
+        cursor.style.transform = `translate3d(calc(${e.clientX}px - 50%), calc(${e.clientY}px - 50%), 0)`
+        });
+
+        document.addEventListener('mousemove', function(e){
+        var x = e.clientX;
+        var y = e.clientY;
+        cursorinner.style.left = x + 'px';
+        cursorinner.style.top = y + 'px';
+        });
+
+        document.addEventListener('mousedown', function(){
+        cursor.classList.add('click');
+        cursorinner.classList.add('cursorinnerhover')
+        });
 
+        document.addEventListener('mouseup', function(){
+        cursor.classList.remove('click')
+        cursorinner.classList.remove('cursorinnerhover')
+        });
 
+        a.forEach(item => {
+        item.addEventListener('mouseover', () => {
+            cursor.classList.add('hover');
+        });
+        item.addEventListener('mouseleave', () => {
+            cursor.classList.remove('hover');
+        });
+        })
 
 
 

diff --git a/style/custom-cursor.css b/style/custom-cursor.css
@@ -0,0 +1,81 @@
+@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
+
+* {
+  cursor: none;
+
+  box-sizing: border-box;
+}
+
+
+h1 {
+    font-family: montserrat;
+    font-size: 40px;
+  }
+
+  a {
+    font-family: Montserrat;
+    position: relative;
+    text-decoration: none;
+
+  }
+
+  a:after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 30%;
+    display: block;
+    margin-top: 5%;
+    left: 0%;
+    background: rgba(0, 0, 0, 0);
+    transition: width .3s ease;
+  }
+
+  a:hover:after{
+    width: 100%;
+    left: 0%;
+    background: rgba(255, 255, 255, 0);
+  }
+
+  .cursor {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: 2px solid rgb(169, 169, 169);
+    background-color: rgba(255, 255, 255, 0.668);
+    transition: transform 200ms ease-out, border 200ms ease-out, background-color 200ms ease-out;
+    position: fixed;
+    pointer-events: none;
+    left: 0;
+    top: 0;
+    transform: translate(calc(-50% + 10px), -50%) scale(1);
+    z-index: 999999999999;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+
+}
+
+.cursor2 {
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+    background-color: black;
+    opacity: 0.4;
+    position: fixed;
+    transform: translate(-50%, -50%) scale(1);
+    pointer-events: none;
+    transition: width 300ms, height 300ms, opacity 300ms, transform 300ms;
+    z-index: 999999999999;
+}
+
+.hover {
+    background-color: rgba(57, 133, 133, 0.567) !important;
+    opacity: 0.6 !important;
+}
+
+.cursorinnerhover {
+    width: 40px !important;
+    height: 40px !important;
+    opacity: 0.7 !important;
+    transform: scale(1.1);
+    left: -5%;
+}