Animated brands section

index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta content="width=device-width, initial-scale=1" name="viewport" />
     <meta name="description" content="Uğur Galeri">
+    <script src="resources/scripts/index.js" defer></script>
     <link type="text/css" rel="stylesheet" href="resources/styles/main.css">
     <title>Uğur Galeri</title>
 </head>
@@ -21,17 +22,17 @@
     </header>
     <div id="container">
         <div id="content">
-            <div class="showcase">
+            <div class="showcase content_spacing">
                 <h1>Biz bir şeyler satıyoruz.</h1>
             </div>
             <div id="brands" class="table content_spacing">
-                <div class="table-item">
+                <div class="table-item square">
                     <img src="resources/img/ugurgaleri-utek.png">
                     <div class="vertical-separator"></div>
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus asperiores blanditiis doloremque eum labore laborum, mollitia nulla odit optio possimus quisquam tempora tenetur voluptatem. Atque cumque fugit harum maiores, necessitatibus nemo perspiciatis quos recusandae saepe sapiente, soluta totam vitae voluptate! Illum inventore ipsa mollitia, nihil odio optio rem. Blanditiis earum fugit nisi quas rem voluptates voluptatibus. Ad aut corporis cupiditate, deserunt dignissimos dolorem error esse excepturi expedita, illum impedit ipsum laudantium minima nostrum odio officia omnis perferendis porro, quae quaerat quasi quia ratione rem reprehenderit sapiente tempora ut voluptatibus? Amet dolores ducimus est fugiat incidunt odit quo, rerum soluta veritatis!</p>
                 </div>
                 <div class="table-item reverse">
-                    <img src="resources/img/ugurgaleri-utek.png">
+                    <img src="resources/img/UKT/UKT.png">
                     <div class="vertical-separator"></div>
                     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus asperiores blanditiis doloremque eum labore laborum, mollitia nulla odit optio possimus quisquam tempora tenetur voluptatem. Atque cumque fugit harum maiores, necessitatibus nemo perspiciatis quos recusandae saepe sapiente, soluta totam vitae voluptate! Illum inventore ipsa mollitia, nihil odio optio rem. Blanditiis earum fugit nisi quas rem voluptates voluptatibus. Ad aut corporis cupiditate, deserunt dignissimos dolorem error esse excepturi expedita, illum impedit ipsum laudantium minima nostrum odio officia omnis perferendis porro, quae quaerat quasi quia ratione rem reprehenderit sapiente tempora ut voluptatibus? Amet dolores ducimus est fugiat incidunt odit quo, rerum soluta veritatis!</p>
                 </div>
@@ -47,6 +48,7 @@
                 </div>
             </div>
             <div id="social">
+                <p></p>
             </div>
         </div>
         <footer id="footer">

resources/css/views/index.scss

@@ -3,7 +3,7 @@
 
 $table-item_img_width: 100px;
 $table-item_margin_between_items: 10px;
-$table-item_margin_img_to_paragraph: 10px;
+$table-item_margin_img_to_paragraph: 100px;
 
 .showcase {
   display: flex;
@@ -32,10 +32,11 @@ $table-item_margin_img_to_paragraph: 10px;
     margin-top: $table-item_margin_between_items;
     display: inline-flex;
     flex-direction: row;
+    align-items: center;
 
     img {
       margin-right: $table-item_margin_img_to_paragraph;
-      height: $table-item_img_width;
+      height: auto;
       width: $table-item_img_width;
     }
   }
@@ -63,4 +64,72 @@ $table-item_margin_img_to_paragraph: 10px;
     border: solid 1px variables.$clr_brand;
     margin-right: $table-item_margin_img_to_paragraph;
   }
+
+  .square {
+    img {
+      height: $table-item_img_width;
+    }
+  }
+
+  .table-item-animation {
+    animation: slide-in-left 3000ms;
+  }
+
+  .table-item-animation-reverse {
+    animation: slide-in-right 3000ms;
+  }
+
+  @keyframes fade-in {
+    from {
+      margin-left: 10%;
+      width: 105%;
+      opacity: 0;
+    }
+
+    to {
+      margin-left: 0;
+      width: 100%;
+      opacity: 1;
+    }
+  }
+
+  @keyframes fade-in-reverse {
+    from {
+      margin-right: 10%;
+      width: 105%;
+      opacity: 0;
+    }
+
+    to {
+      margin-right: 0;
+      width: 100%;
+      opacity: 1;
+    }
+  }
+
+  @keyframes slide-in-left {
+    from {
+      transform: translateX(-100%);
+      opacity: 0;
+    }
+
+    to {
+      transform: translateX(0%);
+      opacity: 1;
+    }
+  }
+
+  @keyframes slide-in-right {
+    from {
+      margin-left: 100%;
+      width: 300%;
+      opacity: 0;
+    }
+
+    to {
+      margin-left: 0;
+      width: 100%;
+      opacity: 1;
+    }
+  }
 }

resources/scripts/index.js

@@ -0,0 +1,15 @@
+const observer = new IntersectionObserver(entries => {
+    entries.forEach(entry => {
+        if (entry.isIntersecting) {
+            if (entry.target.classList.contains('reverse'))
+                entry.target.classList.add('table-item-animation-reverse');
+            else
+                entry.target.classList.add('table-item-animation');
+        }
+    });
+});
+
+let targets = document.querySelectorAll('.table-item');
+targets.forEach(target => {
+    observer.observe(target);
+})

resources/styles/main.css

@@ -26,10 +26,11 @@
   margin-top: 10px;
   display: inline-flex;
   flex-direction: row;
+  align-items: center;
 }
 .table .table-item img {
-  margin-right: 10px;
-  height: 100px;
+  margin-right: 100px;
+  height: auto;
   width: 100px;
 }
 .table .reverse {
@@ -37,19 +38,74 @@
 }
 .table .reverse img {
   margin-right: 0;
-  margin-left: 10px;
+  margin-left: 100px;
 }
 .table .reverse p {
   text-align: right;
 }
 .table .reverse .vertical-separator {
   margin-right: 0;
-  margin-left: 10px;
+  margin-left: 100px;
 }
 .table .vertical-separator {
   height: 120px;
   border: solid 1px #1d60b5;
-  margin-right: 10px;
+  margin-right: 100px;
+}
+.table .square img {
+  height: 100px;
+}
+.table .table-item-animation {
+  animation: slide-in-left 3000ms;
+}
+.table .table-item-animation-reverse {
+  animation: slide-in-right 3000ms;
+}
+@keyframes fade-in {
+  from {
+    margin-left: 10%;
+    width: 105%;
+    opacity: 0;
+  }
+  to {
+    margin-left: 0;
+    width: 100%;
+    opacity: 1;
+  }
+}
+@keyframes fade-in-reverse {
+  from {
+    margin-right: 10%;
+    width: 105%;
+    opacity: 0;
+  }
+  to {
+    margin-right: 0;
+    width: 100%;
+    opacity: 1;
+  }
+}
+@keyframes slide-in-left {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0%);
+    opacity: 1;
+  }
+}
+@keyframes slide-in-right {
+  from {
+    margin-left: 100%;
+    width: 300%;
+    opacity: 0;
+  }
+  to {
+    margin-left: 0;
+    width: 100%;
+    opacity: 1;
+  }
 }
 
 #header {