YouTube Regrets - newsletter button and style tweaks

network-api/networkapi/wagtailpages/templates/wagtailpages/blocks/youtube_regret_block.html

@@ -1,8 +1,8 @@
 
 {% load wagtailcore_tags wagtailimages_tags %}
 
-<div class="youtube-regret mb-5">
-  {% image value.image original class="mb-3" alt=value.imageAltText %}
-  <h2>{{index|stringformat:"02d"}}: {{ value.headline }}</h2>
+<div class="youtube-regret">
+  {% image value.image original class="mb-4" alt=value.imageAltText %}
+  <h2 class="mb-4">{{index|stringformat:"02d"}}: {{ value.headline }}</h2>
   {{ value.story|linebreaks }}
 </div>

network-api/networkapi/wagtailpages/templates/wagtailpages/pages/youtube_regrets_page.html

@@ -32,6 +32,9 @@
       <p>{{text}}</p>
       {% endfor %}
     </div>
+    <div class="intro-button-wrapper">
+      <button class="btn btn-primary btn-newsletter hidden-md-down mx-auto d-none">Join Mozilla</button>
+    </div>
   </div>
 
   <figure class="scroll-hint text-center d-none">

source/js/nav-newsletter.js

@@ -109,6 +109,15 @@ class NavNewsletter {
     });
   }
 
+  buttonDesktopClickHandler(event) {
+    if (!this.isShown) {
+      event.stopPropagation();
+      this.expandDesktopNewsletter();
+    } else {
+      this.closeDesktopNewsletter();
+    }
+  }
+
   init(foundationSiteURL, csrfToken) {
     // some DOM nodes do not exist, return
     if (!this.checkDomNodes()) return;
@@ -122,13 +131,8 @@ class NavNewsletter {
 
     // For desktop+ version:
     // make 'buttonDesktop' the trigger to open newsletter section
-    elements.buttonDesktop.addEventListener("click", event => {
-      if (!this.isShown) {
-        event.stopPropagation();
-        this.expandDesktopNewsletter();
-      } else {
-        this.closeDesktopNewsletter();
-      }
+    elements.buttonDesktop.addEventListener(`click`, event => {
+      this.buttonDesktopClickHandler(event);
     });
 
     // For mobile version:
@@ -140,7 +144,7 @@ class NavNewsletter {
     // For mobile version:
     // make 'buttonMobile' the trigger to show newsletter section
     elements.buttonMobile.addEventListener("click", () => {
-      navNewsletter.expandMobileNewsletter();
+      this.expandMobileNewsletter();
     });
   }
 }

source/js/youtube-regrets.js

@@ -3,13 +3,16 @@ import navNewsletter from "./nav-newsletter.js";
 
 // factor for bringing image blocks closer to perspective origin
 const ZOOM_FACTOR = 2.5;
+// where on the z-axis do we want the rings to start spread out
+const RING_DEPTH_FACTOR = 1 / 5;
 
 let elements = {
   introViewport: `#view-youtube-regrets .intro-viewport`,
   blocks: `#view-youtube-regrets .intro-viewport .block`,
   rings: `#view-youtube-regrets .intro-viewport .ring`,
   introText: `#view-youtube-regrets .intro-viewport .intro-text p`,
-  scrollHint: `#view-youtube-regrets .intro-viewport .scroll-hint`
+  scrollHint: `#view-youtube-regrets .intro-viewport .scroll-hint`,
+  newsletterButton: `#view-youtube-regrets .intro-viewport .btn-newsletter`
 };
 
 class YouTubeRegretsTunnel {
@@ -26,11 +29,11 @@ class YouTubeRegretsTunnel {
     let introText = elements.introText;
     let length = introText.length;
     let speedFactor = length / elements.blocks.length;
-    let baseUnit = this.introScrollHeight * speedFactor;
+    let totalScrollDistance = this.introScrollHeight * speedFactor;
 
     introText.forEach((item, i) => {
-      let positionToShow = baseUnit * (i / length);
-      let positionToHide = baseUnit * ((i + 1) / length);
+      let positionToShow = totalScrollDistance * (i / length);
+      let positionToHide = totalScrollDistance * ((i + 1) / length);
 
       if (
         positionToShow <= this.lastPageYOffset &&
@@ -46,6 +49,22 @@ class YouTubeRegretsTunnel {
         item.style.opacity = 0;
       }
     });
+
+    this.setNewsletterButtonVisibility(totalScrollDistance);
+  }
+
+  /**
+   * Show newsletter signup button if intro is in current viewport.
+   * Hide it otherwise.
+   */
+  setNewsletterButtonVisibility(positionTohide) {
+    let button = elements.newsletterButton[0];
+
+    if (window.pageYOffset >= positionTohide) {
+      button.classList.add(`d-none`);
+    } else {
+      button.classList.remove(`d-none`);
+    }
   }
 
   /**
@@ -61,19 +80,32 @@ class YouTubeRegretsTunnel {
 
       if (coord) {
         let percentToOrigin = coord.z / this.introScrollHeight;
-        opacity = Math.min(percentToOrigin + 1, 1);
+        opacity = Math.min(percentToOrigin * ZOOM_FACTOR + 1, 1);
       }
 
       item.style.opacity = opacity;
     });
   }
 
   /**
-   * Show rings' opacity vlaue
+   * Set rings' opacity so they are become more visible
+   * as they come closer to the threshold we set
    */
   setRingsOpacity() {
-    elements.rings.forEach(ring => {
-      ring.style.opacity = 0.5;
+    const rings = elements.rings;
+    const Z_POSITION_TO_SHOW =
+      this.scenePerspective - this.baseRingGap * Math.ceil(rings.length / 2);
+    let opacity = 1;
+
+    rings.forEach(item => {
+      let matrix = window.getComputedStyle(item).transform;
+      let coord = this.getCoordinatefromMatrix3d(matrix);
+
+      if (coord) {
+        opacity = Math.min(1 - coord.z / Z_POSITION_TO_SHOW, 1);
+      }
+
+      item.style.opacity = opacity;
     });
   }
 
@@ -92,7 +124,8 @@ class YouTubeRegretsTunnel {
     );
     this.updateCSSCustomProperty(
       `--ringZTranslate`,
-      this.lastPageYOffset * ringsSpeedFactor
+      (this.lastPageYOffset * RING_DEPTH_FACTOR * blocksSpeedFactor) /
+        ZOOM_FACTOR
     );
   }
 
@@ -134,16 +167,16 @@ class YouTubeRegretsTunnel {
     // depth of the scene
     this.sceneDepth = this.introScrollHeight - window.innerHeight;
 
+    this.baseBlockGap = this.sceneDepth / elements.blocks.length / ZOOM_FACTOR;
+    this.baseRingGap =
+      (this.sceneDepth * RING_DEPTH_FACTOR) /
+      elements.rings.length /
+      ZOOM_FACTOR;
+
     // update CSS custom properties
     this.updateCSSCustomProperty(`--sceneDepth`, this.sceneDepth);
-    this.updateCSSCustomProperty(
-      `--baseBlockGap`,
-      this.sceneDepth / elements.blocks.length / ZOOM_FACTOR
-    );
-    this.updateCSSCustomProperty(
-      `--baseRingGap`,
-      this.scenePerspective / elements.rings.length
-    );
+    this.updateCSSCustomProperty(`--baseBlockGap`, this.baseBlockGap);
+    this.updateCSSCustomProperty(`--baseRingGap`, this.baseRingGap);
   }
 
   /**
@@ -195,6 +228,10 @@ class YouTubeRegretsTunnel {
       return;
     }
 
+    elements.newsletterButton[0].addEventListener(`click`, event =>
+      navNewsletter.buttonDesktopClickHandler(event)
+    );
+
     this.setSceneDepth();
     this.setObjectsOpacity();
     this.toggleScrollHint();

source/sass/views/youtube-regrets.scss

@@ -126,7 +126,7 @@
               1px *
                 (
                   var(--ringZTranslate) - (var(--baseRingGap) * #{$ring-index}) +
-                    var(--scenePerspective) / 2
+                    var(--scenePerspective)
                 )
             );
           }
@@ -162,14 +162,19 @@
     top: 0;
     bottom: 0;
     display: flex;
+    flex-direction: column;
     justify-content: center;
 
+    @media (min-width: $bp-md) {
+      justify-content: start;
+    }
+
     .intro-text {
       position: relative;
       width: 100%;
       max-width: 840px;
-      height: 100%;
-      margin: auto;
+      height: 55%;
+      margin: 0 auto;
       text-align: center;
 
       p {
@@ -189,6 +194,24 @@
         opacity: 0;
 
         @include scaleText(30px, 38px, 50px, 56px);
+
+        @media (min-width: $bp-md) {
+          top: unset;
+          bottom: 10px;
+        }
+      }
+    }
+
+    .intro-button-wrapper {
+      text-align: center;
+
+      .btn.btn-primary {
+        background-color: $youtube-regrets-red;
+
+        @include hover-focus-active {
+          background-color: $youtube-regrets-lighter-red;
+          color: $white;
+        }
       }
     }
   }
@@ -202,7 +225,7 @@
     h2 {
       font-family: "Changa", sans-serif;
 
-      @include scaleText(30px, 36px, 42px, 42px);
+      @include scaleText(30px, 36px, 38px, 42px);
     }
 
     p {
@@ -280,4 +303,8 @@
     position: sticky;
     top: 120px;
   }
+
+  .youtube-regret {
+    margin-bottom: 80px;
+  }
 }