[Image banner] Add ambient movement to background (Shopify#2342)

* [Image banner] Add ambient movement to background * Polish up the animation * Support prefers-reduced-motion * Reorder schema entries. * Tidy up header names. * Try a faster animation. * Load in higher-res images when ambient animation is active. * Change both the sizes and widths properties. * Fix unintended change to the first stacked conditional. * Update 20 translation files --------- Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com>
Gravytrain-UK · Mar 13, 2023 · 45f34c9 · 45f34c9
1 parent 46364e3
commit 45f34c9
Show file tree

Hide file tree

Showing 23 changed files with 374 additions and 74 deletions.
diff --git a/assets/base.css b/assets/base.css
@@ -3121,3 +3121,17 @@ details-disclosure > details {
 .rte blockquote > * {
   margin: -0.5rem 0 -0.5rem 0;
 }
+
+/* Ambient animation */
+
+@media (prefers-reduced-motion: no-preference) {
+  .animate--ambient > img,
+  .animate--ambient > svg {
+    animation: animateAmbient 30s linear infinite;
+  }
+
+  @keyframes animateAmbient {
+    0% { transform: rotate(0deg) translateX(1em) rotate(0deg) scale(1.2); }
+    100% { transform: rotate(360deg) translateX(1em) rotate(-360deg) scale(1.2); }
+  }
+}
diff --git a/locales/cs.schema.json b/locales/cs.schema.json
@@ -970,9 +970,6 @@
         "image_overlay_opacity": {
           "label": "Neprůhlednost překryvu obrázku"
         },
-        "header": {
-          "content": "Mobilní rozvržení"
-        },
         "show_text_below": {
           "label": "Zobrazit kontejner na mobilním zařízení"
         },
@@ -1045,6 +1042,21 @@
             "label": "Doprava"
           },
           "label": "Zarovnání obsahu v mobilním prostředí"
+        },
+        "animations": {
+          "content": "Animace"
+        },
+        "image_behavior": {
+          "options__1": {
+            "label": "Žádné"
+          },
+          "options__2": {
+            "label": "Krouživý pohyb"
+          },
+          "label": "Chování obrázku"
+        },
+        "mobile": {
+          "content": "Mobilní rozvržení"
         }
       },
       "blocks": {

diff --git a/locales/da.schema.json b/locales/da.schema.json
@@ -970,9 +970,6 @@
         "image_overlay_opacity": {
           "label": "Billedoverlejringens uigennemsigtighed"
         },
-        "header": {
-          "content": "Mobillayout"
-        },
         "show_text_below": {
           "label": "Vis container på mobiltelefon"
         },
@@ -1045,6 +1042,21 @@
             "label": "Højre"
           },
           "label": "Justering af indhold på mobil"
+        },
+        "animations": {
+          "content": "Animationer"
+        },
+        "image_behavior": {
+          "options__1": {
+            "label": "Ingen"
+          },
+          "options__2": {
+            "label": "Omgivende bevægelse"
+          },
+          "label": "Billedadfærd"
+        },
+        "mobile": {
+          "content": "Mobillayout"
         }
       },
       "blocks": {

diff --git a/locales/de.schema.json b/locales/de.schema.json
@@ -970,9 +970,6 @@
         "image_overlay_opacity": {
           "label": "Deckkraft der Bildüberlagerung"
         },
-        "header": {
-          "content": "Mobiles Layout"
-        },
         "show_text_below": {
           "label": "Container auf Mobilgerät anzeigen"
         },
@@ -1045,6 +1042,21 @@
             "label": "Rechts"
           },
           "label": "Mobile Inhaltsausrichtung"
+        },
+        "animations": {
+          "content": "Animationen"
+        },
+        "image_behavior": {
+          "options__1": {
+            "label": "Keins"
+          },
+          "options__2": {
+            "label": "Atmosphärische Bewegung"
+          },
+          "label": "Bildverhalten"
+        },
+        "mobile": {
+          "content": "Mobiles Layout"
         }
       },
       "blocks": {

diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json
@@ -1170,7 +1170,19 @@
         "color_scheme": {
           "info": "Visible when container displayed."
         },
-        "header": {
+        "animations": {
+          "content": "Animations"
+        },
+        "image_behavior": {
+          "options__1": {
+            "label": "None"
+          },
+          "options__2": {
+            "label": "Ambient movement"
+          },
+          "label": "Image behavior"
+        },
+        "mobile": {
           "content": "Mobile Layout"
         },
         "mobile_content_alignment": {

diff --git a/locales/es.schema.json b/locales/es.schema.json
@@ -970,9 +970,6 @@
         "image_overlay_opacity": {
           "label": "Opacidad de la sobreposición de imagen"
         },
-        "header": {
-          "content": "Diseño para móviles"
-        },
         "show_text_below": {
           "label": "Mostrar contenedor en el móvil"
         },
@@ -1045,6 +1042,21 @@
             "label": "Derecha"
           },
           "label": "Alineación del contenido en el móvil"
+        },
+        "animations": {
+          "content": "Animaciones"
+        },
+        "image_behavior": {
+          "options__1": {
+            "label": "Ninguno"
+          },
+          "options__2": {
+            "label": "Movimiento de ambiente"
+          },
+          "label": "Comportamiento de la imagen"
+        },
+        "mobile": {
+          "content": "Diseño para móviles"
         }
       },
       "blocks": {

diff --git a/locales/fi.schema.json b/locales/fi.schema.json
@@ -970,9 +970,6 @@
         "image_overlay_opacity": {
           "label": "Peittokuvan läpikuultavuus"
         },
-        "header": {
-          "content": "Mobiiliasettelu"
-        },
         "show_text_below": {
           "label": "Näytä säilö mobiililaitteessa"
         },
@@ -1045,6 +1042,21 @@
             "label": "Oikealla"
           },
           "label": "Mobiilisisällön tasaus"
+        },
+        "animations": {
+          "content": "Animaatiot"
+        },
+        "image_behavior": {
+          "options__1": {
+            "label": "Ei mitään"
+          },
+          "options__2": {
+            "label": "Ympäristön liike"
+          },
+          "label": "Kuvan käyttäytyminen"
+        },
+        "mobile": {
+          "content": "Mobiilipohja"
         }
       },
       "blocks": {

diff --git a/locales/fr.schema.json b/locales/fr.schema.json
@@ -970,9 +970,6 @@
         "image_overlay_opacity": {
           "label": "Opacité de la superposition d'images"
         },
-        "header": {
-          "content": "Mise en page mobile"
-        },
         "show_text_below": {
           "label": "Afficher le conteneur sur le mobile"
         },
@@ -1045,6 +1042,21 @@
             "label": "Droite"
           },
           "label": "Alignement du contenu sur mobile"
+        },
+        "animations": {
+          "content": "Animations"
+        },
+        "image_behavior": {
+          "options__1": {
+            "label": "Aucun"
+          },
+          "options__2": {
+            "label": "Mouvement ambiant"
+          },
+          "label": "Comportement de l’image"
+        },
+        "mobile": {
+          "content": "Mise en page sur mobile"
         }
       },
       "blocks": {

diff --git a/locales/it.schema.json b/locales/it.schema.json
@@ -970,9 +970,6 @@
         "image_overlay_opacity": {
           "label": "Opacità della sovrapposizione immagine"
         },
-        "header": {
-          "content": "Layout dispositivo mobile"
-        },
         "show_text_below": {
           "label": "Mostra contenitore su dispositivo mobile"
         },
@@ -1045,6 +1042,21 @@
             "label": "A destra"
           },
           "label": "Allineamento contenuto su dispositivi mobili"
+        },
+        "animations": {
+          "content": "Animazioni"
+        },
+        "image_behavior": {
+          "options__1": {
+            "label": "Nessuno"
+          },
+          "options__2": {
+            "label": "Scorrimento lento"
+          },
+          "label": "Comportamento delle immagini"
+        },
+        "mobile": {
+          "content": "Layout dispositivo mobile"
         }
       },
       "blocks": {

diff --git a/locales/ja.schema.json b/locales/ja.schema.json
@@ -970,9 +970,6 @@
         "image_overlay_opacity": {
           "label": "画像のオーバーレイ不透明率"
         },
-        "header": {
-          "content": "モバイルのレイアウト"
-        },
         "show_text_below": {
           "label": "モバイル上にコンテナを表示"
         },
@@ -1045,6 +1042,21 @@
             "label": "右"
           },
           "label": "モバイルのコンテンツアライメント"
+        },
+        "animations": {
+          "content": "アニメーション"
+        },
+        "image_behavior": {
+          "options__1": {
+            "label": "なし"
+          },
+          "options__2": {
+            "label": "周囲の挙動"
+          },
+          "label": "画像の挙動"
+        },
+        "mobile": {
+          "content": "モバイルのレイアウト"
         }
       },
       "blocks": {

diff --git a/locales/ko.schema.json b/locales/ko.schema.json
@@ -970,9 +970,6 @@
         "image_overlay_opacity": {
           "label": "이미지 오버레이 투명도"
         },
-        "header": {
-          "content": "모바일 레이아웃"
-        },
         "show_text_below": {
           "label": "모바일에서 컨테이너 표시"
         },
@@ -1045,6 +1042,21 @@
             "label": "오른쪽"
           },
           "label": "모바일 콘텐츠 정렬"
+        },
+        "animations": {
+          "content": "애니메이션"
+        },
+        "image_behavior": {
+          "options__1": {
+            "label": "없음"
+          },
+          "options__2": {
+            "label": "잔잔한 움직임"
+          },
+          "label": "이미지 동작"
+        },
+        "mobile": {
+          "content": "모바일 레이아웃"
         }
       },
       "blocks": {

diff --git a/locales/nb.schema.json b/locales/nb.schema.json
@@ -970,9 +970,6 @@
         "image_overlay_opacity": {
           "label": "Gjennomsiktighet for bildeoverlegg"
         },
-        "header": {
-          "content": "Mobillayout"
-        },
         "show_text_below": {
           "label": "Vis beholder på mobil"
         },
@@ -1045,6 +1042,21 @@
             "label": "Høyre"
           },
           "label": "Innholdsjustering på mobiltelefon"
+        },
+        "animations": {
+          "content": "Animasjoner"
+        },
+        "image_behavior": {
+          "options__1": {
+            "label": "Ingen"
+          },
+          "options__2": {
+            "label": "Bevegelse i omgivelsene"
+          },
+          "label": "Bildeatferd"
+        },
+        "mobile": {
+          "content": "Mobillayout"
         }
       },
       "blocks": {

diff --git a/locales/nl.schema.json b/locales/nl.schema.json
@@ -970,9 +970,6 @@
         "image_overlay_opacity": {
           "label": "Dekking van afbeeldingsoverlay"
         },
-        "header": {
-          "content": "Mobiele opmaak"
-        },
         "show_text_below": {
           "label": "Container op mobiel weergeven"
         },
@@ -1045,6 +1042,21 @@
             "label": "Rechts"
           },
           "label": "Uitlijning van content op mobiel"
+        },
+        "animations": {
+          "content": "Animaties"
+        },
+        "image_behavior": {
+          "options__1": {
+            "label": "Geen"
+          },
+          "options__2": {
+            "label": "Bewegingen van de omgeving"
+          },
+          "label": "Gedrag van afbeeldingen"
+        },
+        "mobile": {
+          "content": "Opmaak op mobiel"
         }
       },
       "blocks": {