implement block demo

site/layouts/index.html

@@ -1,15 +1,7 @@
 {{ define "main" }}
 
 
-<section class="container max-w-full w-full h-screen bg-gray-100 flex flex-wrap items-center justify-center content-around justify-around">
-  {{ partial "block.html" . }}
-  {{ partial "block.html" . }}
-  {{ partial "block.html" . }}
-  {{ partial "block.html" . }}
-  {{ partial "block.html" . }}
-  {{ partial "block.html" . }}
-  {{ partial "block.html" . }}
-  {{ partial "block.html" . }}
+<section id="js-block-parent" class="container max-w-full w-full h-screen bg-gray-100 flex flex-wrap items-center justify-center content-around justify-around">
   {{ partial "block.html" . }}
 </section>
 

site/layouts/partials/block.html

@@ -1,5 +1,18 @@
-  <div class="js-block c-block relative bg-gray-300 w-64 h-64 overflow-hidden">
-    <div class="c-block__bg bg-gray-600 w-full h-full"></div>
-    <div class="c-block__img absolute w-full h-full top-0 left-0 bg-cover bg-center" style="background-image: url(/img/img.jpg)">
-    </div>
+  <div class="js-block c-block c-block--1 bg-gray-300 w-64 h-64 text-red-500">
+    <div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
+  </div>
+
+  <div class="js-block c-block c-block--2 bg-gray-300 w-64 h-64 text-orange-500">
+    <div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
+  </div>
+
+  <div class="js-block c-block c-block--3 bg-gray-300 w-64 h-64 text-yellow-500">
+    <div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
+  </div>
+
+  <div class="js-block c-block c-block--4 bg-gray-300 w-64 text-green-500">
+    <div class="c-block__img" style="background-image: url(/img/img.jpg)"></div>
+  </div>
+
+  <div class="js-block c-block c-block--5 bg-gray-300 w-64 h-64 text-blue-500">
   </div>

src/css/imports/blocks.scss

@@ -1,44 +1,202 @@
+$duration: 1s;
+$delay: 0.3s;
+
+$transition-img-in: opacity $duration $delay ease-in, transform $duration;
+$transition-img-out: opacity $duration $delay ease-out, transform $duration;
+
+@mixin img-in {
+  transition: $transition-img-in;
+  opacity: 0.5;
+  transform: none;
+}
+
+@mixin img-out {
+  transition: $transition-img-out;
+}
+
+.c-block::before,
+.c-block__img {
+  @include abs-full;
+}
+
 .c-block {
-  $duration: 1s;
-  $delay: 0.3s;
-
-  > .c-block__bg {
-    will-change: transform;
-    transform-origin: 100% 100%;
+  z-index: 1;
+  position: relative;
+  overflow: hidden;
+  &::before {
+    //will-change: transform;
+    z-index: 1;
+    content: "";
     transition: transform $duration;
-    transform: scale3d(1, 1, 1);
-  }
-
-  &.state-1 > .c-block__bg {
-    transform-origin: 100% 100%;
-    transition: transform $duration;
-    transform: scale3d(0.5, 1, 1);
-  }
-
-  &.state-2 > .c-block__bg {
-    transform-origin: 100% 100%;
-    transform-origin: 100 100;
-    transition: transform $duration;
-    transform: scale3d(0.5, 0.5, 1);
+    background-color: currentColor;
+  }
+
+  > .c-block__img {
+    z-index: 2;
+    //will-change: opacity, transform;
+    background-size: cover;
+    background-position: center;
+    opacity: 0;
+  }
+}
+
+.c-block--1 {
+  &::before {
+    transform-origin: 100% 100%;
+
+    @at-root .state-0 & {
+      transform: scale3d(1, 1, 1);
+    }
+
+    @at-root .state-1 & {
+      transform: scale3d(0.5, 1, 1);
+    }
+
+    @at-root .state-2 & {
+      transform: scale3d(0.5, 0.5, 1);
+    }
   }
 
   > .c-block__img {
-    will-change: opacity, transform;
     transform-origin: 0 0;
-    transition: opacity $duration $delay ease-in, transform $duration;
-    opacity: 1;
-    transform: none;
+
+    @at-root .state-0 & {
+      @include img-in;
+    }
+
+    @at-root .state-1 & {
+      @include img-out;
+      transform: translate(50%, 0) scale(1.3);
+    }
+
+    @at-root .state-2 & {
+      transform: translate(50%, 50%) scale(2);
+    }
+  }
+}
+
+.c-block--2 {
+  &::before {
+    transform-origin: 100% 0;
+
+    @at-root .state-0 & {
+      transform: scale3d(0.5, 0.5, 1);
+    }
+
+    @at-root .state-1 & {
+      transform: scale3d(1, 1, 1);
+    }
+
+    @at-root .state-2 & {
+      transform: scale3d(0.5, 1, 1);
+    }
   }
 
-  &.state-1 > .c-block__img {
-    transition: opacity $duration $delay ease-out, transform $duration;
-    opacity: 0;
-    transform: translate(50%, 0) scale(1.3);
+  > .c-block__img {
+    transform-origin: 0 100%;
+
+    @at-root .state-0 & {
+      transform: translate(50%, 50%) scale(2);
+    }
+
+    @at-root .state-1 & {
+      @include img-in;
+    }
+
+    @at-root .state-2 & {
+      transform: translate(50%, 0) scale(1.3);
+      @include img-out;
+    }
+  }
+}
+
+.c-block--3 {
+  &::before {
+    transform-origin: 100% 0;
+
+    @at-root .state-0 & {
+      transform: scale3d(0.5, 1, 1);
+    }
+
+    @at-root .state-1 & {
+      transform: scale3d(0.5, 0.5, 1);
+    }
+
+    @at-root .state-2 & {
+      transform: scale3d(1, 1, 1);
+    }
   }
 
-  &.state-2 > .c-block__img {
-    opacity: 0;
-    transform: translate(50%, 50%) scale(2);
+  > .c-block__img {
+    transform-origin: 0 100%;
+
+    @at-root .state-0 & {
+      @include img-out;
+      transform: translate(50%, 0) scale(1.3);
+    }
+
+    @at-root .state-1 & {
+      transform: translate(50%, 50%) scale(2);
+    }
+
+    @at-root .state-2 & {
+      @include img-in;
+    }
+  }
+}
+
+.c-block--4 {
+  height: 24rem;
+
+  &::before {
+    transform-origin: 100% 0;
+
+    @at-root .state-0 & {
+      transform: scale3d(0.33, 1, 1);
+    }
+
+    @at-root .state-1 & {
+      transform: scale3d(0.33, 0.25, 1);
+    }
+
+    @at-root .state-2 & {
+      transform: scale3d(1, 1, 1);
+    }
+  }
+
+  > .c-block__img {
+    transform-origin: 0 100%;
+
+    @at-root .state-0 & {
+      @include img-out;
+      transform: translate(66.6%, 0) scale(1.3);
+    }
+
+    @at-root .state-1 & {
+      transform: translate(66.6%, 66.6%) scale(2);
+    }
+
+    @at-root .state-2 & {
+      @include img-in;
+    }
+  }
+}
+
+.c-block--5 {
+  &::before {
+    transform-origin: 100% 100%;
+
+    @at-root .state-0 & {
+      transform: scale3d(1, 1, 1);
+    }
+
+    @at-root .state-1 & {
+      transform: scale3d(0.5, 1, 1);
+    }
+
+    @at-root .state-2 & {
+      transform: scale3d(0.5, 0.5, 1);
+    }
   }
 }
 

src/css/main.css

@@ -2,6 +2,8 @@
 @tailwind components;
 @tailwind utilities;
 
+@import "imports/mixins.scss";
+
 @import "imports/blocks.scss";
 
 html,

src/index.js

@@ -5,19 +5,15 @@ import "./css/main.css";
 window.addEventListener("DOMContentLoaded", () => {
   const TRANSITION_DURATION = 1000;
   const INTERVAl = TRANSITION_DURATION + 600;
-  const blocks = document.querySelectorAll(".js-block");
+  const blockParent = document.getElementById("js-block-parent");
 
-  if (blocks) {
-    Array.prototype.forEach.call(blocks, (block) => {
-      let state = 0;
-      setInterval(() => {
-        block.classList.remove(`state-${state}`);
-        state = state < 2 ? state + 1 : 0;
-        if (state > 0)  {
-          block.classList.add(`state-${state}`);
-        }
-      }, INTERVAl);
-    });
+  if (blockParent) {
+    let state = 0;
+    setInterval(() => {
+      blockParent.classList.remove(`state-${state}`);
+      state = state < 2 ? state + 1 : 0;
+      blockParent.classList.add(`state-${state}`);
+    }, INTERVAl);
   }
 });