Feature scroll animation added

Author: pinkbunny1

index.html

@@ -37,19 +37,19 @@ <h1>⇱ ⇲</h1>
 
     <main class="grid">
       <div class="grid__item"></div>
+      <div class="grid__item show_on_scroll"></div>
       <div class="grid__item"></div>
+      <div class="grid__item show_on_scroll"></div>
       <div class="grid__item"></div>
       <div class="grid__item"></div>
       <div class="grid__item"></div>
       <div class="grid__item"></div>
+      <div class="grid__item show_on_scroll"></div>
+      <div class="grid__item show_on_scroll"></div>
       <div class="grid__item"></div>
       <div class="grid__item"></div>
       <div class="grid__item"></div>
-      <div class="grid__item"></div>
-      <div class="grid__item"></div>
-      <div class="grid__item"></div>
-      <div class="grid__item"></div>
-      <div class="grid__item"></div>
+      <div class="grid__item show_on_scroll"></div>
       <div class="grid__item"></div>
     </main>
 
@@ -84,4 +84,5 @@ <h1>⇱ ⇲</h1>
       </div>
     </footer>
   </body>
+  <script src="scrollHandler.js"></script>
 </html>

scrollHandler.js

@@ -0,0 +1,11 @@
+const callback = entries => {
+    entries.forEach(entry => {
+        entry.isIntersecting ? entry.target.classList.add('is_visible') : entry.target.classList.remove('is_visible')
+    })
+};
+
+const observerAPI = new IntersectionObserver(callback);
+
+const targets = document.querySelectorAll('.show_on_scroll');
+
+targets.forEach(target => observerAPI.observe(target));

styles.css

@@ -139,6 +139,16 @@ header {
   background-color: var(--colorSeven);
 }
 
+.is_visible {
+  opacity: 1 !important;
+  transform: translateY(0px) !important;
+}
+
+.show_on_scroll {
+  transition: transform 2s, opacity 1s;
+  opacity: 0;
+  transform: translateY(80px);
+}
 /*  Footer  */
 .footer {
   display: grid;