Add reservation page animations

jimbou · Aug 14, 2018 · c1116e8 · c1116e8
1 parent e85f424
commit c1116e8
Show file tree

Hide file tree

Showing 8 changed files with 98 additions and 14 deletions.
diff --git a/src/index.html b/src/index.html
@@ -311,7 +311,7 @@ <h5 class="page-footer-title mt-3 mt-md-0">NEWSLETTER</h5>
               Complete the form to receive information on the latest events,
               news and special offers at Grecko.
             </p>
-            <form>
+            <form id="newsletter-form">
               <label class="sr-only" for="formEmail">Email</label>
               <input type="email" class="form-control form-control-sm rounded" id="formEmail" placeholder="[email protected]">
               <button type="submit" class="btn btn-sm btn-primary btn-block mt-2">Submit</button>

diff --git a/src/js/about-animations.js b/src/js/about-animations.js
@@ -5,12 +5,14 @@ var historyTitle = document.querySelector('#history-title');
 var historyDescription = document.querySelector('#history-description');
 var jobTitle = document.querySelector('#job-title');
 var jobDescription = document.querySelector('#job-description');
+var newsletterForm = document.querySelector('#newsletter-form');
 title1.style.opacity = "0";
 title2.style.opacity = "0";
 historyTitle.style.opacity = "0";
 historyDescription.style.opacity = "0";
 jobTitle.style.opacity = "0";
 jobDescription.style.opacity = "0";
+newsletterForm.style.opacity = "0";
 
 var options = {
   rootMargin: '0px',
@@ -68,6 +70,14 @@ function callback(entries, observer) {
           observer.unobserve(entry.target);
         }
         break;
+      case "newsletter-form":
+        if (entry.intersectionRatio > 0) {
+          newsletterForm.style.opacity = "1";
+          newsletterForm.className += " animated fadeInUp";
+          // Stop observing target
+          observer.unobserve(entry.target);
+        }
+        break;
     }
   });
 }    
@@ -81,4 +91,5 @@ observer.observe(title2);
 observer.observe(historyTitle);
 observer.observe(historyDescription);
 observer.observe(jobTitle);
-observer.observe(jobDescription);
+observer.observe(jobDescription);
+observer.observe(newsletterForm);
diff --git a/src/js/album-animations.js b/src/js/album-animations.js
@@ -6,13 +6,15 @@ var cardDesserts = document.querySelector('#card-desserts');
 var cardDrinks = document.querySelector('#card-drinks');
 var cardLocation = document.querySelector('#card-location');
 var cardStaff = document.querySelector('#card-staff');
+var newsletterForm = document.querySelector('#newsletter-form');
 title1.style.opacity = "0";
 title2.style.opacity = "0";
 cardFood.style.opacity = "0";
 cardDesserts.style.opacity = "0";
 cardDrinks.style.opacity = "0";
 cardLocation.style.opacity = "0";
 cardStaff.style.opacity = "0";
+newsletterForm.style.opacity = "0";
 
 var options = {
   rootMargin: '0px',
@@ -78,6 +80,14 @@ function callback(entries, observer) {
           observer.unobserve(entry.target);
         }
         break;
+      case "newsletter-form":
+        if (entry.intersectionRatio > 0) {
+          newsletterForm.style.opacity = "1";
+          newsletterForm.className += " animated fadeInUp";
+          // Stop observing target
+          observer.unobserve(entry.target);
+        }
+        break;
     }
   });
 }
@@ -92,4 +102,5 @@ observer.observe(cardFood);
 observer.observe(cardDesserts);
 observer.observe(cardDrinks);
 observer.observe(cardLocation);
-observer.observe(cardStaff);
+observer.observe(cardStaff);
+observer.observe(newsletterForm);
diff --git a/src/js/homepage-animations.js b/src/js/homepage-animations.js
@@ -7,6 +7,7 @@ var aboutBtnAnimation = document.querySelector('#about-btn-animation');
 var card1Animation = document.querySelector('#card-1-animation');
 var card2Animation = document.querySelector('#card-2-animation');
 var card3Animation = document.querySelector('#card-3-animation');
+var newsletterForm = document.querySelector('#newsletter-form');
 foodAnimation.style.opacity = "0";
 dessertsAnimation.style.opacity = "0";
 drinksAnimation.style.opacity = "0";
@@ -15,6 +16,7 @@ aboutBtnAnimation.style.opacity = "0";
 card1Animation.style.opacity = "0";
 card2Animation.style.opacity = "0";
 card3Animation.style.opacity = "0";
+newsletterForm.style.opacity = "0";
 
 var options = {
   rootMargin: '0px',
@@ -88,6 +90,14 @@ function callback(entries, observer) {
           observer.unobserve(entry.target);
         }
         break;
+      case "newsletter-form":
+        if (entry.intersectionRatio > 0) {
+          newsletterForm.style.opacity = "1";
+          newsletterForm.className += " animated fadeInUp";
+          // Stop observing target
+          observer.unobserve(entry.target);
+        }
+        break;
     }
   });
 }
@@ -103,4 +113,5 @@ observer.observe(aboutTextAnimation);
 observer.observe(aboutBtnAnimation);
 observer.observe(card1Animation);
 observer.observe(card2Animation);
-observer.observe(card3Animation);
+observer.observe(card3Animation);
+observer.observe(newsletterForm);
diff --git a/src/js/reservations-animations.js b/src/js/reservations-animations.js
@@ -0,0 +1,51 @@
+/* Album page */
+var title1 = document.querySelector('#title-1');
+var title2 = document.querySelector('#title-2');
+var newsletterForm = document.querySelector('#newsletter-form');
+title1.style.opacity = "0";
+title2.style.opacity = "0";
+newsletterForm.style.opacity = "0";
+
+var options = {
+  rootMargin: '0px',
+  threshold: 0.3
+}
+
+function callback(entries, observer) {
+  entries.forEach(function(entry) {
+    switch (entry.target.id) {
+      case "title-1":
+        if (entry.intersectionRatio > 0) {
+          title1.style.opacity = "1";
+          title1.className += " animated fadeInDown";
+          // Stop observing target
+          observer.unobserve(entry.target);
+        }
+        break;
+      case "title-2":
+        if (entry.intersectionRatio > 0) {
+          title2.style.opacity = "1";
+          title2.className += " animated fadeInUp";
+          // Stop observing target
+          observer.unobserve(entry.target);
+        }
+        break;
+      case "newsletter-form":
+        if (entry.intersectionRatio > 0) {
+          newsletterForm.style.opacity = "1";
+          newsletterForm.className += " animated fadeInUp";
+          // Stop observing target
+          observer.unobserve(entry.target);
+        }
+        break;
+    }
+  });
+}
+
+// Create an intersection observer
+var observer = new IntersectionObserver(callback, options);
+
+// Start observing 
+observer.observe(title1);
+observer.observe(title2);
+observer.observe(newsletterForm);
diff --git a/src/pages/about.html b/src/pages/about.html
@@ -246,7 +246,7 @@ <h5 class="page-footer-title mt-3 mt-md-0">NEWSLETTER</h5>
               Complete the form to receive information on the latest events,
               news and special offers at Grecko.
             </p>
-            <form>
+            <form id="newsletter-form">
               <label class="sr-only" for="formEmail">Email</label>
               <input type="email" class="form-control form-control-sm rounded" id="formEmail" placeholder="[email protected]">
               <button type="submit" class="btn btn-sm btn-primary btn-block mt-2">Submit</button>

diff --git a/src/pages/album.html b/src/pages/album.html
@@ -192,7 +192,7 @@ <h5 class="page-footer-title mt-3 mt-md-0">NEWSLETTER</h5>
               Complete the form to receive information on the latest events,
               news and special offers at Grecko.
             </p>
-            <form>
+            <form id="newsletter-form">
               <label class="sr-only" for="formEmail">Email</label>
               <input type="email" class="form-control form-control-sm rounded" id="formEmail" placeholder="[email protected]">
               <button type="submit" class="btn btn-sm btn-primary btn-block mt-2">Submit</button>

diff --git a/src/pages/reservations.html b/src/pages/reservations.html
@@ -23,7 +23,7 @@
       <header>
       <!-- NAVBAR -->
       <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
-        <a class="navbar-brand animated bounce" href="../index.html">
+        <a class="navbar-brand animated pulse" href="../index.html">
           <img src="../media/brand/logo-dark.svg" width="30" height="30" alt="Logo">
         </a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
@@ -70,8 +70,8 @@
 
       <!-- RESERVATIONS DESCRIPTION -->
       <div class="reservations-description container">
-        <h1 class="special-title-1">RESERVATIONS</h1>
-        <h2 class="special-title-2">Book a Table</h2>
+        <h1 id="title-1" class="special-title-1">RESERVATIONS</h1>
+        <h2 id="title-2" class="special-title-2">Book a Table</h2>
         <p class="mb-0">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et 
           consequat augue. Morbi condimentum interdum magna sit amet pulvinar. 
@@ -120,12 +120,12 @@ <h2 class="special-title-2">Book a Table</h2>
     </main>
     <footer class="page-footer bg-dark">
       <div class="container">
-        <a class="navbar-brand animated bounce d-block text-center m-0 p-0" href="../index.html">
+        <a class="navbar-brand animated pulse d-block text-center m-0 p-0" href="../index.html">
           <img src="../media/brand/logo-light.svg" width="50" height="50" alt="Logo">
         </a>
         <div class="row">
           <div class="col-md-3">
-            <h5 class="page-footer-title">OPENING HOURS</h5>
+            <h5 id="footer-opening-hours" class="page-footer-title">OPENING HOURS</h5>
             <span class="text-muted">BAR SERVICE</span>
             <p class="mb-0">Daily: Bookings from 9am - 11pm</p> 
             <span class="text-muted">LUNCH SERVICE</span>
@@ -134,7 +134,7 @@ <h5 class="page-footer-title">OPENING HOURS</h5>
             <p>Daily: Bookings from 6pm - 9.30pm</p>
           </div>
           <div class="col-md-3 h-100 border-left-custom">
-            <h5 class="page-footer-title mt-3 mt-md-0">LOCATION</h5>
+            <h5 id="footer-location" class="page-footer-title mt-3 mt-md-0">LOCATION</h5>
             <address>
               Grecko Bar &amp; Restaurant<br>
               1355 Market St, Suite 900<br>
@@ -157,7 +157,7 @@ <h5 class="page-footer-title mt-3 mt-md-0">NEWSLETTER</h5>
               Complete the form to receive information on the latest events,
               news and special offers at Grecko.
             </p>
-            <form>
+            <form id="newsletter-form">
               <label class="sr-only" for="formEmail">Email</label>
               <input type="email" class="form-control form-control-sm rounded" id="formEmail" placeholder="[email protected]">
               <button type="submit" class="btn btn-sm btn-primary btn-block mt-2">Submit</button>
@@ -204,6 +204,6 @@ <h5 class="page-footer-title mt-3 mt-md-0">NEWSLETTER</h5>
       }
     </script>
     <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCooj32kgW0ngG8mW3fwa8ctJYhvJnEmug&callback=initMap"></script>
-    <script src="../js/animations.js"></script>
+    <script src="../js/reservations-animations.js"></script>
   </body>
 </html>