Website: Add animation to "ClickOps or DevOps" image (#15064)

Closes: #14990

Changes:
- Updated the image in the "ClickOps or DevOps" section of the homepage
to animate when it is scrolled into view.
- Reduced the margin between the text block and the image in the
"ClickOps or DevOps" section at 991px - 768px screen width.

website/assets/js/pages/homepage.page.js

@@ -15,6 +15,11 @@ parasails.registerPage('homepage', {
   },
   mounted: async function(){
 
+    let imageToAnimate = document.querySelector('[purpose="platform-animated-image"]');
+    // Make sure the animation event listener never runs if the image is removed.
+    if(imageToAnimate) {
+      this._addEventListenerForAnimation(imageToAnimate);
+    }
   },
 
   //  ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗
@@ -35,6 +40,24 @@ parasails.registerPage('homepage', {
 
     closeModal: function() {
       this.modal = undefined;
+    },
+
+    _addEventListenerForAnimation: function (imageToAnimate) {
+      window.addEventListener('scroll', ()=>{
+        // Get the bounding box of the image.
+        let animatedImageBoundingBox = imageToAnimate.getBoundingClientRect();
+        if (animatedImageBoundingBox.top >= 0 &&
+            animatedImageBoundingBox.left >= 0 &&
+            animatedImageBoundingBox.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+            animatedImageBoundingBox.right <= (window.innerWidth || document.documentElement.clientWidth))
+        {
+          // When the image is completly in the user's viewport, add the 'animate' class to it.
+          imageToAnimate.classList.add('animate');
+        } else if(imageToAnimate.classList.contains('animate')) {
+          // When it is no longer in the user's viewport, remove the 'animate' class if it has it.
+          imageToAnimate.classList.remove('animate');
+        }
+      });
     }
   }
 });

website/assets/styles/pages/homepage.less

@@ -320,11 +320,50 @@
       height: auto;
     }
   }
-  [purpose='platform-large-image'] {
-    width: 620px;
+  [purpose='platform-animated-image'] {
+    position: relative;
+    width: 617px;
+    height: 440px;
     img {
       width: 100%;
-      height: auto;
+      height: 100%;
+    }
+    div {
+      position: absolute;
+      top: 0;
+      right: 0;
+      height: 100%;
+      width: 100%;
+      transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    }
+    [purpose='animated-image-layer-1'] {
+      background: url('/images/homepage-device-management-github-617x440@2x.png');
+      background-size: contain;
+      background-position: center;
+      background-repeat: no-repeat;
+      z-index: 1;
+      transform: translate(10px, 10px);
+    }
+    [purpose='animated-image-layer-2'] {
+      background: url('/images/homepage-device-management-fleet-ui-617x440@2x.png');
+      background-size: contain;
+      background-position: center;
+      background-repeat: no-repeat;
+      z-index: 2;
+      transform: translate(-10px, 10px);
+    }
+    [purpose='animated-image-layer-3'] {
+      background: url('/images/homepage-device-management-terminal-617x440@2x.png');
+      background-size: contain;
+      background-position: center;
+      background-repeat: no-repeat;
+      z-index: 3;
+      transform: translate(10px, -10px);
+    }
+    &.animate { // This class is added when the element is completly visible.
+      div {
+        transform: none;
+      }
     }
   }
   [purpose='bottom-gradient'] {
@@ -823,15 +862,16 @@
       margin-left: 80px;
     }
     [purpose='platform-small-text-block'] {
-      max-width: 357px;
-      margin-right: 80px;
+      min-width: 320px;
+      margin-right: 20px;
     }
 
-    [purpose='platform-large-image'] {
+    [purpose='platform-animated-image'] {
       width: 453px;
+      height: auto;
       img {
         width: 100%;
-        height: auto;
+        height: 100%;
       }
     }
 
@@ -936,13 +976,14 @@
     }
     [purpose='platform-small-text-block'] {
       max-width: 100%;
+      min-width: unset;
       margin-right: 0px;
       margin-bottom: 80px;
     }
     [purpose='platform-image'] {
       width: 100%;
     }
-    [purpose='platform-large-image'] {
+    [purpose='platform-animated-image'] {
       width: 100%;
       img {
         width: 100%;

website/views/pages/homepage.ejs

@@ -223,8 +223,11 @@
         <p>Manage your IT infrastructure <a href="/docs/using-fleet/fleet-ui">in any browser</a> or use <a href="/guides/using-github-actions-to-apply-configuration-profiles-with-fleet">git</a> to make infrastructure changes as code. You can use the <a href="/docs/using-fleet/fleetctl-cli">CLI</a> or <a href="/docs/using-fleet/rest-api">API</a> to automate the deployment, configuration, and monitoring of your devices.</p>
         <a purpose="animated-arrow-button-red" href="/docs">Explore the docs</a>
       </div>
-      <div purpose="platform-large-image">
-        <img alt="ClickOps or GitOps" src="/images/homepage-fleet-ui-536x389@2x.png">
+      <div purpose="platform-animated-image">
+        <div purpose="animated-image-layer-1"></div>
+        <div purpose="animated-image-layer-2"></div>
+        <div purpose="animated-image-layer-3"></div>
+        <img alt="A blank image" src="/images/homepage-image-container-617x440@2x.png">
       </div>
     </div>