Encapsulating CSS styles, moving function excution into LoadEager execution context.

Author: Srkkki

blocks/cloud-image/cloud-image.css

@@ -1,45 +1,43 @@
 .cloud-image-wrapper {
   height: 100vh;
   position: relative;
-}
-
 
-.icon.icon-logo-big {
-  height: 100px;
-  width: 140px;
-}
+  .cloud-image {
+    height: 100%;
+    
+    & h1:first-of-type {
+      font-size: clamp(2rem, 7vw + .25rem, 5.625rem);
+    }
 
-.cloud-image {
-  height: 100%;
-
-  & h1:first-of-type {
-    font-size: clamp(2rem, 7vw + .25rem, 5.625rem);
+    .icon.icon-logo-big {
+      height: 100px;
+      width: 140px;
+    }
+    
+    .cloud-image-header {
+      position: absolute;
+      width: 100%;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      opacity: 1;
+      z-index: 1;
+    }
+    
+    .cloud-image-element {
+      position: absolute;
+      top: 0;
+      left: 0;
+      max-width: 60vw;
+      max-height: 40vh;
+      animation: cloud 36s infinite;
+      animation-delay: 0s;
+      opacity: 0;
+      z-index: 0;
+    }
   }
 }
 
-.cloud-image-header {
-  position: absolute;
-  width: 100%;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  opacity: 1;
-  z-index: 1;
-
-}
-
-.cloud-image-picture {
-  position: absolute;
-  top: 0;
-  left: 0;
-  max-width: 60vw;
-  max-height: 40vh;
-  animation: cloud 36s infinite;
-  animation-delay: 0s;
-  opacity: 0;
-  z-index: 0;
-}
-
 /* Keyframe cloud animation */
 @keyframes cloud {
   0% {

blocks/cloud-image/cloud-image.js

@@ -12,7 +12,7 @@ function addClassToDivsWithPicture() {
 
     childDivs.forEach((div) => {
       if (div.querySelector('picture')) {
-        div.classList.add('cloud-image-picture');
+        div.classList.add('cloud-image-element');
       }
     });
   });
@@ -32,7 +32,7 @@ function setDataAttributes() {
     4, 5, 2, 34, 3, 7, 8,
     9, 15, 15, 12, 22, 20, 26, 33, 31, 25, 27,
   ];
-  const cloudImagePictureElements = document.querySelectorAll('.cloud-image-picture');
+  const cloudImagePictureElements = document.querySelectorAll('.cloud-image-element');
 
   cloudImagePictureElements.forEach((div, index) => {
     const leftIndex = index % leftValues.length;
@@ -46,7 +46,7 @@ function setDataAttributes() {
 
 function positionImageInTheCloud() {
   const cloudImgContainer = document.querySelector('.cloud-image-wrapper');
-  const cloudImagePictureElements = document.querySelectorAll('.cloud-image-picture');
+  const cloudImagePictureElements = document.querySelectorAll('.cloud-image-element');
 
   const {
     width: containerWidth,

scripts/scripts.js

@@ -81,7 +81,6 @@ async function loadEager(doc) {
     document.body.classList.add('appear');
     await loadSection(main.querySelector('.section'), waitForFirstImage);
   }
-
   try {
     /* if desktop (proxy for fast connection) or fonts already loaded, load fonts.css */
     if (window.innerWidth >= 900 || sessionStorage.getItem('fonts-loaded')) {
@@ -90,6 +89,11 @@ async function loadEager(doc) {
   } catch (e) {
     // do nothing
   }
+  /**
+ * Executing function that manipulate position of the
+ * cloud image block upon loading the page.
+ */
+  positionImageInTheCloud();
 }
 
 /**
@@ -125,8 +129,6 @@ async function loadPage() {
   await loadEager(document);
   await loadLazy(document);
   loadDelayed();
-  // Executing function that manipulate position upon loading the page.
-  positionImageInTheCloud();
 }
 
 loadPage();