KAW-7904 Refactor

Netcentric · Sep 20, 2024 · 54e646a · 54e646a
1 parent a003068
commit 54e646a
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 23 deletions.
diff --git a/blocks/text-with-image/text-with-image.css b/blocks/text-with-image/text-with-image.css
@@ -1,4 +1,6 @@
 .text-with-image {
+  --animation-time: 300ms;
+
   padding-top: 60px;
   padding-bottom: 60px;
 }
@@ -61,24 +63,36 @@
   gap: 40px;
 }
 
+.text-with-image.stacked-images .column-with-text {
+  transform: translateY(calc(214px - var(--text-image-distance)));
+  transition: transform var(--animation-time) linear;
+}
+
 .text-with-image.stacked-images .column-with-images p:nth-child(1) img {
   aspect-ratio: 4 / 3;
   margin: 0 calc(-1 * var(--section-x-padding));
   max-width: unset;
   width: calc(100% + 2 * var(--section-x-padding));
-  margin-bottom: 180px;
 }
 
 .text-with-image.stacked-images .column-with-images p:nth-child(2) img {
   width: 214px;
   position: absolute;
   right: 21px;
   bottom: 0;
+  transform: translateY(calc(100% - var(--text-image-distance)));
+  transition: transform var(--animation-time) linear;
 }
 
 /* wide stacked images variant */
 .text-with-image.wide-stacked-images .text-with-image-row {
-  gap: 40px;
+  gap: 0;
+}
+
+.text-with-image.wide-stacked-images .column-with-text {
+  transform: translateY(calc(var(--text-image-distance) * -1));
+  transition: transform var(--animation-time) linear;
+  margin-top: 189px;
 }
 
 .text-with-image.wide-stacked-images .column-with-images p:nth-child(1) img {
@@ -93,6 +107,8 @@
   right: 21px;
   position: absolute;
   bottom: 0;
+  transform: translateY(calc(100% - var(--text-image-distance)));
+  transition: transform var(--animation-time) linear;
 }
 
 @media (width >= 768px) {
@@ -140,6 +156,10 @@
   }
 
   /* stacked images variant */
+  .text-with-image.stacked-images .column-with-text {
+    transform: unset;
+  }
+
   .text-with-image.stacked-images .column-with-images {
     align-self: flex-start;
   }
@@ -166,7 +186,9 @@
   }
 
   .text-with-image.wide-stacked-images .column-with-text {
-    margin-top: -90px;
+    margin: 0;
+    margin-top: 80px;
+    transform: translateY(calc(102px - var(--text-image-distance)));
   }
 
   .text-with-image.wide-stacked-images .column-with-images p:nth-child(2) img {
@@ -211,9 +233,11 @@
     right: 81px;
   }
 
-   /* wide stacked images variant */
+  /* wide stacked images variant */
   .text-with-image.wide-stacked-images .column-with-text {
-    margin-top: calc(-1 * var(--text-image-distance, 0px));
+    max-width: 381px;
+    margin-left: calc(50% - 381px);
+    transform: translateY(calc(137px - var(--text-image-distance)));
   }
 
   .text-with-image.wide-stacked-images .column-with-images p:nth-child(2) img {
@@ -240,4 +264,11 @@
   .text-with-image.wide-stacked-images .column-with-images p:nth-child(2) img {
     width: 607px;
   }
+
+  .text-with-image.wide-stacked-images .column-with-text {
+    max-width: 506px;
+    margin-left: unset;
+    transform: translateY(calc(182px - var(--text-image-distance)));
+    margin-top: 120px;
+  }
 }
diff --git a/blocks/text-with-image/text-with-image.js b/blocks/text-with-image/text-with-image.js
@@ -15,8 +15,8 @@ const moveImageOnScroll = (block, settings = {}) => {
   const [firstImage, secondImage] = block.querySelectorAll('.column-with-images img');
   let inProgress = false;
   const {
-    minOverlap = 0.1,
-    maxOverlap = 0.5,
+    startOverlap = 0.1,
+    endOverlap = 0.5,
     durationRatio = 0.66,
   } = settings;
 
@@ -27,22 +27,19 @@ const moveImageOnScroll = (block, settings = {}) => {
     const rect = firstImage.getBoundingClientRect();
     const distanceFromTheBottom = windowHeight - rect.bottom;
     const secondImageHeight = secondImage.height;
-    let overlapInPx = 0;
+    let distance = 0;
 
     if (distanceFromTheBottom >= durationInPx) {
-      overlapInPx = (1 - maxOverlap) * secondImageHeight;
+      distance = endOverlap * 100;
     } else if (distanceFromTheBottom < 0) {
-      overlapInPx = (1 - minOverlap) * secondImageHeight;
+      distance = startOverlap * 100;
     } else {
-      const shiftRatio = (distanceFromTheBottom / durationInPx) * (maxOverlap - minOverlap);
-      overlapInPx = (1 - (shiftRatio + minOverlap)) * secondImageHeight;
+      const shiftRatio = (distanceFromTheBottom / durationInPx) * (endOverlap - startOverlap);
+      distance = (shiftRatio + startOverlap) * 100;
     }
 
-    // fix for strange scroll event with less then 1px
-    if (Math.abs(firstImage.style.marginBottom.split('px')[0] - overlapInPx) > 1) {
-      firstImage.style.marginBottom = `${overlapInPx}px`;
-      block.style.setProperty('--text-image-distance', `${secondImageHeight - overlapInPx}px`);
-    }
+    const distanaceToPx = (distance * secondImageHeight) / 100;
+    block.style.setProperty('--text-image-distance', `${distanaceToPx}px`);
   };
 
   window.addEventListener('scroll', () => {
@@ -78,11 +75,7 @@ export default async function decorate(block) {
 
   gatherButtons(block.querySelectorAll('.button-container'));
 
-  if (block.classList.contains('stacked-images')) {
-    moveImageOnScroll(block);
-  }
-
-  if (block.classList.contains('wide-stacked-images')) {
-    moveImageOnScroll(block, { minOverlap: -1, maxOverlap: 0.4, durationRatio: 0.3 });
+  if (block.classList.contains('stacked-images') || block.classList.contains('wide-stacked-images')) {
+    moveImageOnScroll(block, { startOverlap: -1, endOverlap: 0.3, durationRatio: 0.33 });
   }
 }