Video on the website

feove · Jun 18, 2024 · 046e309 · 046e309
1 parent 5ea9e36
commit 046e309
Show file tree

Hide file tree

Showing 4 changed files with 119 additions and 16 deletions.
diff --git a/index.html b/index.html
@@ -35,11 +35,36 @@
         <div class="translucent-background">
             <div class="wrapper">
                 <div class="text-box">
-                    <h3>Welcome in Treashunt</h3>
+                    <h3>Bienvenue dans Treashunt</h3>
                 </div>
             </div>
         </div>
 
+        <div class="video-container">
+            <div class="text-left">
+                <p>N<br>O<br>T<br>R<br>E</p>
+
+            </div>
+            <div class="video-frame">
+                <video width="1080" height="720" controls autoplay loop muted>
+                    <source src="media/TrailerTrashunt.mp4" type="video/mp4">
+                    Your browser does not support the video tag.
+                </video>
+            </div>
+            <div class="text-right">
+                <p>T<br>R<br>A<br>I<br>L<br>E<br>R</p>
+
+            </div>
+        </div>
+
+
+
+
+        <div class="animated-title">
+            <h1>Partez à l'aventure !</h1>
+        </div>
+
+
         <div class="background-Picture">
             <div class="picture-treashunt">
                 <div class="grid-item">
@@ -66,7 +91,7 @@ <h3>Histoire</h3>
     <div class="Story-content">
         <div class="story-background">
             <div class="story-header">
-                <h2>Bienvenue dans le monde de TreasHunt</h2>
+                <h2>Qu'est ce que TreasHunt ?</h2>
             </div>
             <div class="story-content">
                 <div class="story-text">
@@ -146,6 +171,17 @@ <h2>Bienvenue dans le monde de TreasHunt</h2>
                 textBox.classList.add('visible');
             }
         });
+
+        window.addEventListener('scroll', function() {
+    const animatedTitle = document.querySelector('.animated-title');
+    const titlePosition = animatedTitle.getBoundingClientRect().top;
+    const screenPosition = window.innerHeight / 1.3;
+
+    if (titlePosition < screenPosition) {
+        animatedTitle.classList.add('visible');
+    }
+});
+
     </script>
 </body>
 </html>
diff --git a/index/about.html b/index/about.html
@@ -223,18 +223,18 @@ <h2 style="color: rgb(217, 217, 217);">Juin 2023</h2>
             }
         });
         window.addEventListener('scroll', () => {
-    const scrollY = window.scrollY;
-
+        const scrollY = window.scrollY;
+            
 
-    const sky = document.getElementById('sky');
-    if (sky) {
-        sky.style.transform = `translateY(${scrollY * 0.4}px)`;
-    }
-
-    const plain = document.getElementById('plain');
-    if (plain) {
-        plain.style.transform = `translateY(${scrollY * 0}px)`;
-    }
+        const sky = document.getElementById('sky');
+        if (sky) {
+            sky.style.transform = `translateY(${scrollY * 0.4}px)`;
+        }
+
+        const plain = document.getElementById('plain');
+        if (plain) {
+            plain.style.transform = `translateY(${scrollY * 0}px)`;
+        }
 });
 
 

diff --git a/style/style-about.css b/style/style-about.css
@@ -206,7 +206,7 @@ section img {
     border-radius: 50%;
     left: 50%;
     margin-left: -10px;
-    z-index: 1;
+    z-index: 1000;
 }
 
 .timeline-item .timeline-content,

diff --git a/style/style-home.css b/style/style-home.css
@@ -316,6 +316,7 @@ section {
     width: 7%;
     height: auto;
     animation: race-runner 16s linear infinite;
+    z-index: 10000000;
 }
 
 .bubble {
@@ -488,8 +489,6 @@ section {
     text-align: justify;
     font-size: 1.4em;
     line-height: 1.5;
-
-
 }
 
 .story-text p {
@@ -527,3 +526,71 @@ section {
         margin-bottom: 20px;
     }
 }
+
+/* ---------------------VIDEO------------------------------- */
+.video-container {
+    margin-left: -5%;
+    display: grid;
+    grid-template-columns: 1fr auto 1fr; /* Une colonne pour chaque texte et une pour la vidéo */
+    gap: 20px;
+    margin: 20px auto;
+    max-width: 1200px;
+    text-align: center;
+    align-items: center; /* Centre les éléments verticalement */
+}
+
+.text-left, .text-right {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 3em;
+    color: #dedede;
+    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
+
+}
+
+.video-frame {
+    position: relative;
+    overflow: hidden;
+    border-radius: 15px;
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
+
+    margin: 0 5%;
+}
+
+.video-frame video {
+    width: 100%;
+    height: auto;
+    display: block;
+    border-radius: 15px;
+    outline: none;
+}
+
+
+
+/* -------------------------------------------------------- */
+
+.animated-title {
+    text-align: center;
+    margin: 50px 0;
+    opacity: 0;
+    transform: translateY(50px);
+    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
+    background: rgba(240, 240, 240, 0.9); /* Fond gris clair */
+    padding: 20px;
+    border-radius: 15px; /* Coins arrondis */
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Ombre portée pour la profondeur */
+    display: inline-block;
+}
+
+.animated-title h1 {
+    font-family: 'Oswald', sans-serif;
+    font-size: 3em;
+    color: #010501;
+    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
+}
+
+.animated-title.visible {
+    opacity: 1;
+    transform: translateY(0);
+}