add scroll animations

osrd-project · Nov 10, 2023 · 3acb416 · 3acb416
1 parent 82c4ac1
commit 3acb416
Show file tree

Hide file tree

Showing 12 changed files with 337 additions and 148 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,3 @@
 node_modules
-
+.DS_Store
 .parcel-cache
diff --git a/app.css b/app.css
@@ -9,11 +9,10 @@ html {
   scroll-behavior: smooth;
 }
 
-.container {
+.background {
   text-align: center;
   color: var(--color);
   width: 100%;
-
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -50,6 +49,7 @@ html {
 }
 
 .section-two .part-one {
+  height: 40vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -59,6 +59,7 @@ html {
 }
 
 .section-two .part-two {
+  height: 60vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -149,11 +150,20 @@ html {
 }
 
 .logo-place {
-  height: 18rem;
+  height: 15rem;
 }
 
-p {
-  text-align: center;
+.logo-metro {
+  height: 1.5rem;
+  vertical-align: -6px;
+}
+
+a {
+  text-decoration: none;
+}
+
+.link {
+  color: white;
 }
 
 h1 {
@@ -219,6 +229,20 @@ time {
   display: flex;
   flex-direction: column;
 }
+
+.hidden {
+  opacity: 0;
+  filter: blur(5px);
+  transform : translateX(-100%);
+  transition: all 1s;
+}
+
+.show {
+  opacity: 1;
+  filter: blur(0);
+  transform : translateX(0);
+}
+
 @media screen and (max-width: 1024px) {
   p {
     padding: 0.5rem;
@@ -239,3 +263,9 @@ time {
     font-size: 3rem;
   }
 }
+
+@media (prefers-reduced-motion) {
+  .hidden {
+    transition: none;
+  }
+}
diff --git a/dist/index.75a90472.css b/dist/index.75a90472.css
diff --git a/dist/index.75a90472.css.map b/dist/index.75a90472.css.map
diff --git a/dist/index.975ef6c8.js b/dist/index.975ef6c8.js
diff --git a/dist/index.975ef6c8.js.map b/dist/index.975ef6c8.js.map
diff --git a/dist/index.html b/dist/index.html
@@ -7,7 +7,7 @@
     <script src="/index.975ef6c8.js" defer=""></script>
   </head>
   <body>
-    <div class="container mandatory-scroll-snapping" dir="ltr">
+    <div class="background mandatory-scroll-snapping" dir="ltr">
       <section class="section-one" id="section-one">
         <div class="container-one">
           <svg viewbox="0 0 567.3 475.8">
@@ -56,7 +56,7 @@
         </div>
         <div>
           <p id="first-text">
-            Présentation des versions<b>Short Term DCM</b> et
+            Présentation des versions <b>Short Term DCM</b> et
             <b>Etudes Exploitation</b> du <b>programme</b>
             <span><b>OSRD</b></span>
           </p>
@@ -96,24 +96,26 @@
       </section>
       <section class="section-two" id="section-two">
         <div class="part-one">
-          <h1>
+          <h1 class="hidden">
             Design
             <span style="color: #000">your Journey<span style="color: #c7b2de">.</span></span>
           </h1>
-          <p>
-            34 rue du commandant René Mouchotte <br>
-            de 14h à 16h <br>
-            <simetrodeparis><span> Montparnasse Bienvenue</span>
-          </simetrodeparis></p>
-          <p>75014 Paris</p>
+          <a href="https://maps.app.goo.gl/xpuXFz91JD33hsij6" class="hidden link">
+            <p>
+              34 rue du commandant René Mouchotte <br>
+              de 14h à 16h <br>
+              <span> <img src="/logo-metro.f6ae4ac6.png" alt="metro" class="logo-metro hidden"> Montparnasse Bienvenue</span>
+            </p>
+          <p class="hidden">75014 Paris</p>
+        </a>
         </div>
         <div class="part-two">
-          <h2>Le lieu</h2>
-          <img src="/OSRD-kickoff-programme-plan-event.13fe5069.svg" alt="plan" class="logo-place">
+          <h2 class="hidden">Le lieu</h2>
+          <img src="/OSRD-kickoff-programme-plan-event.13fe5069.svg" alt="plan" class="logo-place hidden">
         </div>
       </section>
       <section class="section-three" id="section-three">
-        <div>
+        <div class="hidden"> 
           <h2>Les conférences</h2>
           <p style="color: #000">
             Au programme, de 14h à 16h, une série de conférences de 5 minutes
@@ -122,12 +124,12 @@ <h2>Les conférences</h2>
           <time>14:00 - 16:00</time>
         </div>
         <div class="part-two">
-          <p>
+          <p class="hidden">
             <span>14:00</span> - Cérémonie d'ouverture et introduction au
             programme OSRD <br>
             <b>Loïc Hamelin</b> - Directeur du programme OSRD
           </p>
-          <p>
+          <p class="hidden">
             <span>14:05</span> - Conférence principale Short Term DCM <br>
             <b>Loïc Hamelin</b> - Directeur du programme OSRD <br>
             <b>Loïc Hamelin</b> - Directeur du programme OSRD <br>
@@ -136,7 +138,7 @@ <h2>Les conférences</h2>
             <b>Loïc Hamelin</b> - Directeur du programme OSRD <br>
             <b>Loïc Hamelin</b> - Directeur du programme OSRD
           </p>
-          <p>
+          <p class="hidden">
             <span>15:45</span> - Conclusion et avenir du projet au sein de SNCF
             Réseau <br>
             <b>Loïc Hamelin</b> - Directeur du programme OSRD
@@ -146,9 +148,9 @@ <h2>Les conférences</h2>
       <section class="section-four" id="section-four">
         <div class="container-four">
           <div>
-            <h2>La suite</h2>
+            <h2 class="hidden">La suite</h2>
           </div>
-          <div>
+          <div class="hidden">
             <p>
               Pour plus d'informations, <br>
               cliquez sur :

diff --git a/dist/logo-metro.f6ae4ac6.png b/dist/logo-metro.f6ae4ac6.png
diff --git a/index.html b/index.html
@@ -7,7 +7,7 @@
     <script src="./src/index.js" type="module"></script>
   </head>
   <body>
-    <div class="container mandatory-scroll-snapping" dir="ltr">
+    <div class="background mandatory-scroll-snapping" dir="ltr">
       <section class="section-one" id="section-one">
         <div class="container-one">
           <svg viewBox="0 0 567.3 475.8">
@@ -100,7 +100,7 @@
         </div>
         <div>
           <p id="first-text">
-            Présentation des versions<b>Short Term DCM</b> et
+            Présentation des versions <b>Short Term DCM</b> et
             <b>Etudes Exploitation</b> du <b>programme</b>
             <span><b>OSRD</b></span>
           </p>
@@ -187,30 +187,34 @@
       </section>
       <section class="section-two" id="section-two">
         <div class="part-one">
-          <h1>
+          <h1 class="hidden">
             Design
             <span style="color: black"
               >your Journey<span style="color: #c7b2de">.</span></span
             >
           </h1>
-          <p>
-            34 rue du commandant René Mouchotte <br />
-            de 14h à 16h <br />
-            <SiMetrodeparis /><span> Montparnasse Bienvenue</span>
-          </p>
-          <p>75014 Paris</p>
+          <a href="https://maps.app.goo.gl/xpuXFz91JD33hsij6" class="hidden link">
+            <p>
+              34 rue du commandant René Mouchotte <br />
+              de 14h à 16h <br />
+              <span> <img src="/public/assets/visuels/logo-metro.png"
+                alt="metro"
+                class="logo-metro hidden"> Montparnasse Bienvenue</span>
+            </p>
+          <p class="hidden">75014 Paris</p>
+        </a>
         </div>
         <div class="part-two">
-          <h2>Le lieu</h2>
+          <h2 class="hidden">Le lieu</h2>
           <img
             src="/public/assets/plan/OSRD-kickoff-programme-plan-event.svg"
             alt="plan"
-            class="logo-place"
+            class="logo-place hidden"
           />
         </div>
       </section>
       <section class="section-three" id="section-three">
-        <div>
+        <div class="hidden"> 
           <h2>Les conférences</h2>
           <p style="color: black">
             Au programme, de 14h à 16h, une série de conférences de 5 minutes
@@ -219,12 +223,12 @@ <h2>Les conférences</h2>
           <time>14:00 - 16:00</time>
         </div>
         <div class="part-two">
-          <p>
+          <p class="hidden">
             <span>14:00</span> - Cérémonie d'ouverture et introduction au
             programme OSRD <br />
             <b>Loïc Hamelin</b> - Directeur du programme OSRD
           </p>
-          <p>
+          <p class="hidden">
             <span>14:05</span> - Conférence principale Short Term DCM <br />
             <b>Loïc Hamelin</b> - Directeur du programme OSRD <br />
             <b>Loïc Hamelin</b> - Directeur du programme OSRD <br />
@@ -233,7 +237,7 @@ <h2>Les conférences</h2>
             <b>Loïc Hamelin</b> - Directeur du programme OSRD <br />
             <b>Loïc Hamelin</b> - Directeur du programme OSRD
           </p>
-          <p>
+          <p class="hidden">
             <span>15:45</span> - Conclusion et avenir du projet au sein de SNCF
             Réseau <br />
             <b>Loïc Hamelin</b> - Directeur du programme OSRD
@@ -243,9 +247,9 @@ <h2>Les conférences</h2>
       <section class="section-four" id="section-four">
         <div class="container-four">
           <div>
-            <h2>La suite</h2>
+            <h2 class="hidden">La suite</h2>
           </div>
-          <div>
+          <div class="hidden">
             <p>
               Pour plus d'informations, <br />
               cliquez sur :

diff --git a/public/assets/visuels/logo-metro.png b/public/assets/visuels/logo-metro.png
diff --git a/src/index.js b/src/index.js
@@ -171,3 +171,16 @@ updateFooterVisibility();
 document.addEventListener("scroll", function () {
   updateFooterVisibility();
 });
+
+const observer = new IntersectionObserver((entries) => {
+  entries.forEach((entry) => {
+    if (entry.isIntersecting) {
+      entry.target.classList.toggle("show", entry.isIntersecting);
+    } else {
+      entry.target.classList.remove("show");
+    }
+  });
+});
+
+const hiddenElements = document.querySelectorAll(".hidden");
+hiddenElements.forEach((el) => observer.observe(el));