[Image Banner] Fixed background position (#2523 + #2524)

Shopify · May 1, 2023 · d6cf556 · d6cf556
1 parent d9d02dd
commit d6cf556
Show file tree

Hide file tree

Showing 24 changed files with 121 additions and 22 deletions.
diff --git a/assets/base.css b/assets/base.css
@@ -3113,6 +3113,16 @@ details-disclosure > details {
   clip-path: ellipse(45% 45% at 50% 50%);
 }
 
+/* Fixed background */
+.animate--fixed {
+  clip-path: inset(0);
+}
+
+.animate--fixed>img:not(.zoom):not(.deferred-media__poster-button),
+.animate--fixed>svg:not(.zoom):not(.deferred-media__poster-button) {
+  position: fixed;
+}
+
 /* Animations */
 
 @media (prefers-reduced-motion: no-preference) {

diff --git a/assets/section-image-banner.css b/assets/section-image-banner.css
@@ -158,7 +158,25 @@
   left: auto;
 }
 
+.banner__media-half.animate--fixed:first-child > img {
+  width: 50%;
+}
+
+.banner__media-half.animate--fixed:nth-child(2) > img {
+  left: 50%;
+  width: 50%;
+}
+
 @media screen and (max-width: 749px) {
+  .banner--stacked .animate--fixed:first-child > img {
+    width: 100%;
+  }
+
+  .banner--stacked .banner__media-half.animate--fixed:nth-child(2) > img {
+    left: 0;
+    width: 100%;
+  }
+
   .banner--stacked .banner__media-half {
     width: 100%;
   }

diff --git a/locales/cs.schema.json b/locales/cs.schema.json
@@ -432,7 +432,10 @@
           "options__2": {
             "label": "Krouživý pohyb"
           },
-          "label": "Chování obrázku"
+          "label": "Chování obrázku",
+          "options__3": {
+            "label": "Neměnná pozice na pozadí"
+          }
         }
       }
     },

diff --git a/locales/da.schema.json b/locales/da.schema.json
@@ -432,7 +432,10 @@
           "options__2": {
             "label": "Omgivende bevægelse"
           },
-          "label": "Billedadfærd"
+          "label": "Billedadfærd",
+          "options__3": {
+            "label": "Fast baggrundsplacering"
+          }
         }
       }
     },

diff --git a/locales/de.schema.json b/locales/de.schema.json
@@ -432,7 +432,10 @@
           "options__2": {
             "label": "Atmosphärische Bewegung"
           },
-          "label": "Bildverhalten"
+          "label": "Bildverhalten",
+          "options__3": {
+            "label": "Feste Hintergrundposition"
+          }
         }
       }
     },

diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json
@@ -379,6 +379,9 @@
           "options__2": {
             "label": "Ambient movement"
           },
+          "options__3": {
+            "label": "Fixed background position"
+          },
           "label": "Image behavior"
         }
       },

diff --git a/locales/es.schema.json b/locales/es.schema.json
@@ -432,7 +432,10 @@
           "options__2": {
             "label": "Movimiento de ambiente"
           },
-          "label": "Comportamiento de la imagen"
+          "label": "Comportamiento de la imagen",
+          "options__3": {
+            "label": "Posición del fondo fija"
+          }
         }
       }
     },

diff --git a/locales/fi.schema.json b/locales/fi.schema.json
@@ -432,7 +432,10 @@
           "options__2": {
             "label": "Ympäristön liike"
           },
-          "label": "Kuvan käyttäytyminen"
+          "label": "Kuvan käyttäytyminen",
+          "options__3": {
+            "label": "Kiinteä taustasijainti"
+          }
         }
       }
     },

diff --git a/locales/fr.schema.json b/locales/fr.schema.json
@@ -432,7 +432,10 @@
           "options__2": {
             "label": "Mouvement ambiant"
           },
-          "label": "Comportement de l’image"
+          "label": "Comportement de l’image",
+          "options__3": {
+            "label": "Position de l’arrière-plan fixe"
+          }
         }
       }
     },

diff --git a/locales/it.schema.json b/locales/it.schema.json
@@ -432,7 +432,10 @@
           "options__2": {
             "label": "Scorrimento lento"
           },
-          "label": "Comportamento delle immagini"
+          "label": "Comportamento delle immagini",
+          "options__3": {
+            "label": "Posizione dello sfondo fissa"
+          }
         }
       }
     },

diff --git a/locales/ja.schema.json b/locales/ja.schema.json
@@ -432,7 +432,10 @@
           "options__2": {
             "label": "周囲の挙動"
           },
-          "label": "画像の挙動"
+          "label": "画像の挙動",
+          "options__3": {
+            "label": "背景位置の固定"
+          }
         }
       }
     },

diff --git a/locales/ko.schema.json b/locales/ko.schema.json
@@ -432,7 +432,10 @@
           "options__2": {
             "label": "잔잔한 움직임"
           },
-          "label": "이미지 동작"
+          "label": "이미지 동작",
+          "options__3": {
+            "label": "고정 배경 위치"
+          }
         }
       }
     },

diff --git a/locales/nb.schema.json b/locales/nb.schema.json
@@ -432,7 +432,10 @@
           "options__2": {
             "label": "Bevegelse i omgivelsene"
           },
-          "label": "Bildeatferd"
+          "label": "Bildeatferd",
+          "options__3": {
+            "label": "Låst bakgrunnsposisjon"
+          }
         }
       }
     },

diff --git a/locales/nl.schema.json b/locales/nl.schema.json
@@ -432,7 +432,10 @@
           "options__2": {
             "label": "Bewegingen van de omgeving"
           },
-          "label": "Gedrag van afbeeldingen"
+          "label": "Gedrag van afbeeldingen",
+          "options__3": {
+            "label": "Vaste positie op de achtergrond"
+          }
         }
       }
     },

diff --git a/locales/pl.schema.json b/locales/pl.schema.json
@@ -432,7 +432,10 @@
           "options__2": {
             "label": "Ruch otoczenia"
           },
-          "label": "Zachowanie obrazu"
+          "label": "Zachowanie obrazu",
+          "options__3": {
+            "label": "Stałe położenie tła"
+          }
         }
       }
     },

diff --git a/locales/pt-BR.schema.json b/locales/pt-BR.schema.json
@@ -432,7 +432,10 @@
           "options__2": {
             "label": "Movimentação do ambiente"
           },
-          "label": "Comportamento da imagem"
+          "label": "Comportamento da imagem",
+          "options__3": {
+            "label": "Posição fixa do plano de fundo"
+          }
         }
       }
     },

diff --git a/locales/pt-PT.schema.json b/locales/pt-PT.schema.json
@@ -432,7 +432,10 @@
           "options__2": {
             "label": "Movimento de ambiente"
           },
-          "label": "Comportamento da imagem"
+          "label": "Comportamento da imagem",
+          "options__3": {
+            "label": "Posição de fundo fixa"
+          }
         }
       }
     },

diff --git a/locales/sv.schema.json b/locales/sv.schema.json
@@ -432,7 +432,10 @@
           "options__2": {
             "label": "Omgivande rörelse"
           },
-          "label": "Bildbeteende"
+          "label": "Bildbeteende",
+          "options__3": {
+            "label": "Fast bakgrundsplacering"
+          }
         }
       }
     },

diff --git a/locales/th.schema.json b/locales/th.schema.json
@@ -432,7 +432,10 @@
           "options__2": {
             "label": "การเคลื่อนไหวแวดล้อม"
           },
-          "label": "พฤติกรรมภาพ"
+          "label": "พฤติกรรมภาพ",
+          "options__3": {
+            "label": "ตำแหน่งพื้นหลังได้รับการแก้ไข"
+          }
         }
       }
     },

diff --git a/locales/tr.schema.json b/locales/tr.schema.json
@@ -432,7 +432,10 @@
           "options__2": {
             "label": "Ortam içinde hareket"
           },
-          "label": "Görsel davranışı"
+          "label": "Görsel davranışı",
+          "options__3": {
+            "label": "Sabit arka plan konumu"
+          }
         }
       }
     },

diff --git a/locales/vi.schema.json b/locales/vi.schema.json
@@ -432,7 +432,10 @@
           "options__2": {
             "label": "Chuyển động xung quanh"
           },
-          "label": "Hành vi của ảnh"
+          "label": "Hành vi của ảnh",
+          "options__3": {
+            "label": "Vị trí nền cố định"
+          }
         }
       }
     },

diff --git a/locales/zh-CN.schema.json b/locales/zh-CN.schema.json
@@ -432,7 +432,10 @@
           "options__2": {
             "label": "环境移动"
           },
-          "label": "图片行为"
+          "label": "图片行为",
+          "options__3": {
+            "label": "修复背景位置"
+          }
         }
       }
     },

diff --git a/locales/zh-TW.schema.json b/locales/zh-TW.schema.json
@@ -432,7 +432,10 @@
           "options__2": {
             "label": "緩慢移動"
           },
-          "label": "圖片行為"
+          "label": "圖片行為",
+          "options__3": {
+            "label": "固定背景位置"
+          }
         }
       }
     },

diff --git a/sections/image-banner.liquid b/sections/image-banner.liquid
@@ -30,16 +30,20 @@
 {%- endstyle -%}
 
 {%- liquid
+  assign full_width = '100vw'
+  assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
+
   if section.settings.image_behavior == 'ambient'
     assign half_width = '60vw'
     assign full_width = '120vw'
     assign stacked_sizes = '(min-width: 750px) 60vw, 120vw'
     assign widths = '450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680'
+  elsif section.settings.image_behavior == 'fixed'
+    assign half_width = '100vw'
+    assign stacked_sizes = '100vw'
   else
     assign half_width = '50vw'
-    assign full_width = '100vw'
     assign stacked_sizes = '(min-width: 750px) 50vw, 100vw'
-    assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
   endif
 -%}
 
@@ -304,6 +308,10 @@
         {
           "value": "ambient",
           "label": "t:sections.all.animation.image_behavior.options__2.label"
+        },
+        {
+          "value": "fixed",
+          "label": "t:sections.all.animation.image_behavior.options__3.label"
         }
       ],
       "default": "none",