Add contact page animations

src/js/contact-animations.js

@@ -0,0 +1,73 @@
+/* Contact page */
+var title1Directions = document.querySelector('#title-1-directions');
+var title2Directions = document.querySelector('#title-2-directions');
+var title1Contact = document.querySelector('#title-1-contact');
+var title2Contact = document.querySelector('#title-2-contact');
+var newsletterForm = document.querySelector('#newsletter-form');
+title1Directions.style.opacity = "0";
+title2Directions.style.opacity = "0";
+title1Contact.style.opacity = "0";
+title2Contact.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-directions":
+        if (entry.intersectionRatio > 0) {
+          title1Directions.style.opacity = "1";
+          title1Directions.className += " animated fadeInDown";
+          // Stop observing target
+          observer.unobserve(entry.target);
+        }
+        break;
+      case "title-2-directions":
+        if (entry.intersectionRatio > 0) {
+          title2Directions.style.opacity = "1";
+          title2Directions.className += " animated fadeInUp";
+          // Stop observing target
+          observer.unobserve(entry.target);
+        }
+        break;
+      case "title-1-contact":
+        if (entry.intersectionRatio > 0) {
+          title1Contact.style.opacity = "1";
+          title1Contact.className += " animated fadeInDown";
+          // Stop observing target
+          observer.unobserve(entry.target);
+        }
+        break;
+      case "title-2-contact":
+        if (entry.intersectionRatio > 0) {
+          title2Contact.style.opacity = "1";
+          title2Contact.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(title1Directions);
+observer.observe(title2Directions);
+observer.observe(title1Contact);
+observer.observe(title2Contact);
+observer.observe(newsletterForm);

src/js/reservations-animations.js

@@ -1,4 +1,4 @@
-/* Album page */
+/* Reservations page */
 var title1 = document.querySelector('#title-1');
 var title2 = document.querySelector('#title-2');
 var newsletterForm = document.querySelector('#newsletter-form');

src/pages/contact.html

@@ -22,7 +22,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">
@@ -68,8 +68,8 @@
     <main>
       <!-- DIRECTIONS -->
       <div class="contact-directions container">
-        <h1 class="special-title-1">DIRECTIONS</h1>
-        <h2 class="special-title-2">How to Get Here</h2>
+        <h1 id="title-1-directions" class="special-title-1">DIRECTIONS</h1>
+        <h2 id="title-2-directions" class="special-title-2">How to Get Here</h2>
         <dl class="mb-0">
           <dt>Directions from A</dt>
           <dd class="mb-0">
@@ -85,8 +85,8 @@ <h2 class="special-title-2">How to Get Here</h2>
       <!-- CONTACT -->
       <div class="container-fluid contact-information-wrapper">
         <div class="contact-information container">
-          <h1 class="special-title-1 text-center">CONTACT</h1>
-          <h2 class="special-title-2 text-center">Leave Your Message</h2>
+          <h1 id="title-1-contact" class="special-title-1 text-center">CONTACT</h1>
+          <h2 id="title-2-contact" class="special-title-2 text-center">Leave Your Message</h2>
           <div class="row">
             <div class="col-md-7 contact-form">
               <form>
@@ -142,7 +142,7 @@ <h6>DINNER SERVICE</h6>
     </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">
@@ -179,7 +179,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>
@@ -226,6 +226,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/contact-animations.js"></script>
   </body>
 </html>