Update hero with flag animation (fixes #15515)

no-js: no animation button, static svg reduced motion pref: animation button available, static by default button click: toggles current animation state and updates text
mozilla · Dec 2, 2024 · a21cf2e · a21cf2e
1 parent 7207fc4
commit a21cf2e
Show file tree

Hide file tree

Showing 8 changed files with 387 additions and 13 deletions.
diff --git a/bedrock/mozorg/templates/mozorg/home/home-m24.html b/bedrock/mozorg/templates/mozorg/home/home-m24.html
@@ -54,3 +54,7 @@
     {% include 'includes/protocol/footer/footer.html' %}
   {% endwith %}
 {% endblock %}
+
+{% block js %}
+  {{ js_bundle('m24-animation') }}
+{% endblock %}
diff --git a/bedrock/mozorg/templates/mozorg/home/includes/m24/hero.html b/bedrock/mozorg/templates/mozorg/home/includes/m24/hero.html
@@ -5,15 +5,60 @@
 #}
 
 <div class="m24-t-light-alt m24-t-dark">
-  <section class="m24-c-flag">
-    <div class="m24-c-flag-media">
-      <img src="{{ static('img/home/2024/hero-symbol-white.svg') }}" alt="" width="216" height="243">
-    </div>
+  <section class="m24-c-flag" data-animation-running="false">
+    <!-- TODO: translate play/pause text -->
+    <button class="m24-c-flag-button js-animation-button" aria-live="polite">
+      <span class="m24-c-flag-button-pause"><img src="{{ static('img/m24/icon-pause.svg') }}" alt=""> <span class="m24-c-flag-button-text">Pause Animation</span></span>
+      <span class="m24-c-flag-button-play"><img src="{{ static('img/m24/icon-play.svg') }}" alt=""> <span class="m24-c-flag-button-text">Play Animation</span></span>
+    </button>
     <div class="m24-c-flag-text">
       <h1 class="m24-c-flag-title">{{ ftl('m24-home-welcome-to-mozilla') }}</h1>
       <p class="m24-c-flag-subtitle">{{ ftl('m24-home-from-trustworthy-tech') }}</p>
       <p class="m24-c-flag-cta"><a href="{{ url('mozorg.about.index') }}" class="m24-c-cta m24-t-lg" data-cta-text="Learn about us">{{ ftl('m24-home-learn-about-us') }}</a></p>
     </div>
+    <div class="m24-c-flag-media">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 176.26 200.19">
+        <defs>
+            <filter id="dilate" x="-10%" y="-10%" width="120%" height="120%">
+                <feMorphology operator="dilate" radius="0.3" in="SourceGraphic" result="dilated" />
+            </filter>
+        </defs>
+        <g class="stationary">
+            <path shape-rendering="crispEdges" class="flag"
+                d="M39.55,181.45h-20.77V19.06h20.77v162.4ZM56.52,101.87h82.22v-4.68l-53.55-19.46v-16.39l53.55-19.46v-4.68h-63.5v-18.14h82.22v33.06l-43.6,15.07v4.68l43.6,15.07v33.06H56.52v-18.14ZM56.52,37.2h18.73v18.73h-18.73v-18.73Z" />
+        </g>
+        <g class="wave">
+            <path shape-rendering="crispEdges" class="pole" d="M39.55,181.45h-20.77V19.06h20.77v162.4ZM56.52" />
+            <polygon shape-rendering="crispEdges" class="flag-five"
+                points="126.03 37.2 138.74 37.2 138.74 41.88 126.03 46.5 126.03 62.99 157.47 52.12 157.47 19.06 126.03 19.06 126.03 37.2" />
+            <polygon shape-rendering="crispEdges" class="flag-five"
+                points="126.03 101.87 126.03 120.01 157.47 120.01 157.47 86.94 126.03 76.08 126.03 92.56 138.74 97.18 138.74 101.87 126.03 101.87" />
+            <polygon shape-rendering="crispEdges" class="flag-four"
+                points="113.88 88.15 126.02 92.56 126.02 76.07 113.88 71.87 113.88 88.15" />
+            <rect shape-rendering="crispEdges" class="flag-four" x="113.88" y="101.87" width="12.15" height="18.14" />
+            <rect shape-rendering="crispEdges" class="flag-four" x="113.88" y="19.06" width="12.15" height="18.14" />
+            <polygon shape-rendering="crispEdges" class="flag-four"
+                points="113.88 50.92 113.88 67.19 126.02 62.99 126.02 46.5 113.88 50.92" />
+            <polygon shape-rendering="crispEdges" class="flag-three"
+                points="113.88 67.19 113.88 50.92 85.2 61.34 85.2 77.73 113.88 88.15 113.88 71.87 113.87 71.87 113.87 67.19 113.88 67.19" />
+            <rect shape-rendering="crispEdges" class="flag-three" x="85.19" y="101.87" width="28.68" height="18.14" />
+            <rect shape-rendering="crispEdges" class="flag-three" x="85.19" y="19.06" width="28.68" height="18.14" />
+            <rect shape-rendering="crispEdges" class="flag-two" x="75.16" y="101.87" width="10.02" height="18.14" />
+            <rect shape-rendering="crispEdges" class="flag-two" x="75.25" y="19.06" width="9.93" height="18.14" />
+            <rect shape-rendering="crispEdges" class="flag-one" x="56.52" y="101.87" width="18.63" height="18.14" />
+            <rect shape-rendering="crispEdges" class="flag-one" x="56.52" y="37.2" width="18.73" height="18.73" />
+        </g>
+        <g class="blink-bounce">
+            <path class="pole-two" d="M39.55,181.45h-20.77v-107.29h20.77v107.29Z" />
+            <g class="head">
+                <rect class="pole-one" x="18.78" y="19.06" width="20.77" height="149.97" />
+                <rect class="eye" x="56.52" y="37.2" width="18.73" height="18.73" />
+                <polygon class="mouth"
+                    points="56.52 101.87 138.74 101.87 138.74 97.18 85.2 77.73 85.2 61.34 138.74 41.88 138.74 37.2 75.25 37.2 75.25 19.06 157.47 19.06 157.47 52.12 113.87 67.19 113.87 71.87 157.47 86.94 157.47 120.01 56.52 120.01 56.52 101.87" />
+            </g>
+        </g>
+    </svg>
+    </div>
   </section>
 </div>