add animated title and toggle functionality for improved visual effect

css/style.css

@@ -353,9 +353,78 @@ footer {
 .form-header {
   display: flex;
   justify-content: right; /* Aligns items with space between them */
-  ;
 }
 
 #close-form-button-project, #close-form-button-{
   width: 35px;
+}
+
+.container-title {
+  text-align: center;
+
+}
+.container-title #xyz {
+  left: 25vw;
+  font-family: 'Cabin Condensed', sans-serif;
+  position: relative;
+  white-space: nowrap;
+  font-size: 10vh;
+  max-width: 40vw;
+  font-weight: bold;
+  overflow: hidden;
+  color: #f6f6f6;
+  animation: textreveal 4s infinite alternate;
+}
+.container-title #ball {
+  top: 14vh;
+  position: absolute;
+  height: 20vh;
+  width: 10vw;
+  white-space: nowrap;
+  overflow: hidden;
+  background-color: #f57724;
+  border-radius: 50%;
+  animation: ballmove 4s infinite alternate;
+  z-index: 1;
+  box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.3);
+}
+@keyframes ballmove {
+  0% {
+    transform: translate(25vw, 5vh) scale(0.1);
+  }
+  10% {
+    transform: translateX(25vw) scale(0.5);
+  }
+  40% {
+    transform: translateX(65vw) scale(0.5);
+  }
+  60% {
+    transform: translate(61vw, 5vh) scale(0.1);
+  }
+  70% {
+    transform: translate(61vw, 5vh) scale(0.15);
+  }
+  80% {
+    transform: translate(61vw, 5vh) scale(0.1);
+  }
+  90% {
+    transform: translate(61vw, 5vh) scale(0.15);
+  }
+  100% {
+    transform: translate(61vw, 5vh) scale(0.1);
+  }
+}
+@keyframes textreveal {
+  0% {
+    width: 0;
+  }
+  10% {
+    width: 0;
+  }
+  40% {
+    width: 40vw;
+  }
+  100% {
+    width: 40vw;
+  }
 }

index.html

@@ -39,8 +39,10 @@
       </div>
     </div>
     <div>
-        <div>
+        <div id="title-global">
-          <h1 class="global_title">Caméra Timelapse</h1>
+          <h1 id="h1-title" class="global_title">Caméra Timelapse</h1>
+          <div id="ball"></div>
+          <p id="xyz" style="display: none;">Caméra Timelapse</p>
         </div>
         <div id="carousel-container" class="container">
           <div id="carousel" class="carousel">
@@ -52,7 +54,7 @@
     </div>
       <div id="carousel-dots"></div>
 
-    <footer class="text-center mt-5 py-3">
+    <footer class="text-center mt-5 py-3" onclick="change_title_style()">
         <p>&copy; 2025 Timelapse. All rights reserved.</p>
     </footer>
 

js/index.js

@@ -235,4 +235,29 @@ window.addEventListener('DOMContentLoaded', (event) => {
                 // Append the new h1 element to the body
       body.appendChild(newH1);
   }
-});
+});
+let titleIsReadable = true;
+
+function change_title_style(){
+  const titlePlaceHolder = document.getElementById('title-global');
+  const ball = document.getElementById('ball');
+  const xyz = document.getElementById('xyz');
+  const h1_title = document.getElementById('h1-title');
+  if(titleIsReadable){
+    titleIsReadable = false;
+    titlePlaceHolder.classList.add('container-title');
+    ball.style.display = 'block';
+    xyz.style.display = 'block';
+    h1_title.style.display = 'none';
+  } else {
+    titleIsReadable = true;
+    titlePlaceHolder.classList.remove('container-title');
+    ball.style.display = 'none';
+    xyz.style.display = 'none';
+    h1_title.style.display = 'block';
+  }
+ 
+  
+
+} 
+change_title_style();