Adapting cloud image component logic to take text elements.

Author: Srkkki

blocks/cloud-image/cloud-image.css

@@ -38,6 +38,27 @@
   }
 }
 
+.cloud-image-text-wrapper {
+  width: min(1440px, 100% - 2 * 100px);
+  margin-inline: auto;
+
+  .cloud-image-text {
+    position: relative;
+    height: 75vh;
+  }
+
+  .cloud-image-text-element {
+    position: absolute;
+    text-align: center;
+    animation: wobble  36s infinite;
+    opacity: 0;
+    z-index: 0;
+    p {
+      font-size: clamp(2rem, 3.5vw, 3.5rem);
+    }
+  }
+}
+
 /* Keyframe cloud animation */
 @keyframes cloud {
   0% {
@@ -68,4 +89,35 @@
   100% {
     opacity: 0;
   }
-}
+}
+
+/* Keyframe wobble animation */
+@keyframes wobble {
+  0% {
+    transform: scale(.25);
+    filter: blur(5px);
+    opacity: 0;
+  }
+  
+  6% {
+    opacity: 1;
+  }
+
+  20% {
+    filter: blur(0);
+  }
+
+  25% {
+    opacity: 1;
+  }
+
+  33% {
+    transform: scale(.9);
+    filter: blur(5px);
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}

blocks/cloud-image/cloud-image.js

@@ -18,21 +18,35 @@ function addClassToDivsWithPicture() {
   });
 }
 
+function addClassToDivsWithText() {
+  const cloudImageElementsWithText = document.querySelectorAll('.cloud-image-text');
+  cloudImageElementsWithText.forEach((cloudImageText) => {
+    const childDivs = cloudImageText.querySelectorAll(':scope > div');
+
+    childDivs.forEach((div) => {
+      if (!div.querySelector('picture')) {
+        div.classList.add('cloud-image-text-element');
+      }
+    });
+  });
+}
+
 function setDataAttributes() {
   // Arrays for top and left values calculation (mocked from the original site that seems random)
   const topValues = [
     20, 0, 50, 70, 100, 60, 90, 20, 0, 40,
-    90, 80, 60, 60, 90, 10, 40, 50, 80,
+    90, 80, 60, 60, 90, 10, 40, 50, 80, 100,
   ];
   const leftValues = [
-    50, 90, 60, 80, 30, 80, 0, 20, 60, 90,
+    50, 90, 60, 80, 30, 80, 0, 20, 60, 90, 100,
     10, 70, 100, 30, 90, 0, 50, 90, 90, 30,
   ];
   const delayValues = [
     4, 5, 2, 34, 3, 7, 8,
     9, 15, 15, 12, 22, 20, 26, 33, 31, 25, 27,
   ];
   const cloudImagePictureElements = document.querySelectorAll('.cloud-image-element');
+  const cloudImageTextElements = document.querySelectorAll('.cloud-image-text-element');
 
   cloudImagePictureElements.forEach((div, index) => {
     const leftIndex = index % leftValues.length;
@@ -42,23 +56,41 @@ function setDataAttributes() {
     div.setAttribute('data-top', topValues[topIndex]);
     div.setAttribute('data-delay', delayValues[delayIndex]);
   });
+
+  cloudImageTextElements.forEach((div, index) => {
+    const leftIndex = index % leftValues.length;
+    const topIndex = index % topValues.length;
+    const delayIndex = index % delayValues.length;
+    div.setAttribute('data-left', leftValues[leftIndex]);
+    div.setAttribute('data-top', topValues[topIndex]);
+    div.setAttribute('data-delay', delayValues[delayIndex]);
+  });
 }
 
 function positionImageInTheCloud() {
   const cloudImgContainer = document.querySelector('.cloud-image-wrapper');
   const cloudImagePictureElements = document.querySelectorAll('.cloud-image-element');
+  const cloudImageTextElements = document.querySelectorAll('.cloud-image-text-element');
 
   const {
-    width: containerWidth,
-    height: containerHeight,
+    width: ImgContainerWidth,
+    height: ImgContainerHeight,
   } = cloudImgContainer.getBoundingClientRect();
 
   cloudImagePictureElements.forEach((element) => {
     const img = element.querySelector('img');
     if (!img) return;
     const { width: imgWidth, height: imgHeight } = img;
-    const elementStyleTop = `${element.dataset.left * (1 - imgWidth / containerWidth)}`;
-    const elementStyleLeft = `${element.dataset.top * (1 - imgHeight / containerHeight) * 0.96}`;
+    const elementStyleTop = `${element.dataset.left * (1 - imgWidth / ImgContainerWidth)}`;
+    const elementStyleLeft = `${element.dataset.top * (1 - imgHeight / ImgContainerHeight) * 0.96}`;
+    element.style.left = (elementStyleLeft > 60) ? `${60}%` : `${elementStyleLeft}%`;
+    element.style.top = (elementStyleTop > 57) ? `${57}%` : `${elementStyleTop}%`;
+    element.style.animationDelay = `${element.dataset.delay - 36}s`;
+  });
+
+  cloudImageTextElements.forEach((element) => {
+    const elementStyleTop = `${100 - element.dataset.left}`;
+    const elementStyleLeft = `${100 - element.dataset.top}`;
     element.style.left = (elementStyleLeft > 60) ? `${60}%` : `${elementStyleLeft}%`;
     element.style.top = (elementStyleTop > 57) ? `${57}%` : `${elementStyleTop}%`;
     element.style.animationDelay = `${element.dataset.delay - 36}s`;
@@ -68,4 +100,5 @@ function positionImageInTheCloud() {
 export default positionImageInTheCloud;
 
 addClassToDivsWithPicture();
+addClassToDivsWithText();
 setDataAttributes();