Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Image behavior] Fixed background position #2523

Merged
merged 4 commits into from
May 1, 2023
Merged

[Image behavior] Fixed background position #2523

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2e89412
Add fixed position background
LucasLacerdaUX Apr 13, 2023
4fbf49d
Update 13 translation files
translation-platform[bot] Apr 14, 2023
4d0723a
Update 7 translation files
translation-platform[bot] Apr 17, 2023
63f3ba4
[Image Banner] Fixed background position (#2524)
LucasLacerdaUX May 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions assets/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3260,6 +3260,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) {
Expand Down
18 changes: 18 additions & 0 deletions assets/section-image-banner.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
}
Expand Down
5 changes: 4 additions & 1 deletion locales/cs.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -471,7 +471,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í"
}
}
}
},
Expand Down
5 changes: 4 additions & 1 deletion locales/da.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -471,7 +471,10 @@
"options__2": {
"label": "Omgivende bevægelse"
},
"label": "Billedadfærd"
"label": "Billedadfærd",
"options__3": {
"label": "Fast baggrundsplacering"
}
}
}
},
Expand Down
5 changes: 4 additions & 1 deletion locales/de.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -471,7 +471,10 @@
"options__2": {
"label": "Atmosphärische Bewegung"
},
"label": "Bildverhalten"
"label": "Bildverhalten",
"options__3": {
"label": "Feste Hintergrundposition"
}
}
}
},
Expand Down
3 changes: 3 additions & 0 deletions locales/en.default.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -403,6 +403,9 @@
"options__2": {
"label": "Ambient movement"
},
"options__3": {
"label": "Fixed background position"
},
"label": "Image behavior"
}
},
Expand Down
5 changes: 4 additions & 1 deletion locales/es.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -471,7 +471,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"
}
}
}
},
Expand Down
5 changes: 4 additions & 1 deletion locales/fi.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -471,7 +471,10 @@
"options__2": {
"label": "Ympäristön liike"
},
"label": "Kuvan käyttäytyminen"
"label": "Kuvan käyttäytyminen",
"options__3": {
"label": "Kiinteä taustasijainti"
}
}
}
},
Expand Down
5 changes: 4 additions & 1 deletion locales/fr.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -471,7 +471,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"
}
}
}
},
Expand Down
5 changes: 4 additions & 1 deletion locales/it.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -471,7 +471,10 @@
"options__2": {
"label": "Scorrimento lento"
},
"label": "Comportamento delle immagini"
"label": "Comportamento delle immagini",
"options__3": {
"label": "Posizione dello sfondo fissa"
}
}
}
},
Expand Down
5 changes: 4 additions & 1 deletion locales/ja.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -471,7 +471,10 @@
"options__2": {
"label": "周囲の挙動"
},
"label": "画像の挙動"
"label": "画像の挙動",
"options__3": {
"label": "背景位置の固定"
}
}
}
},
Expand Down
5 changes: 4 additions & 1 deletion locales/ko.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -471,7 +471,10 @@
"options__2": {
"label": "잔잔한 움직임"
},
"label": "이미지 동작"
"label": "이미지 동작",
"options__3": {
"label": "고정 배경 위치"
}
}
}
},
Expand Down
5 changes: 4 additions & 1 deletion locales/nb.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -471,7 +471,10 @@
"options__2": {
"label": "Bevegelse i omgivelsene"
},
"label": "Bildeatferd"
"label": "Bildeatferd",
"options__3": {
"label": "Låst bakgrunnsposisjon"
}
}
}
},
Expand Down
5 changes: 4 additions & 1 deletion locales/nl.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -471,7 +471,10 @@
"options__2": {
"label": "Bewegingen van de omgeving"
},
"label": "Gedrag van afbeeldingen"
"label": "Gedrag van afbeeldingen",
"options__3": {
"label": "Vaste positie op de achtergrond"
}
}
}
},
Expand Down
5 changes: 4 additions & 1 deletion locales/pl.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -471,7 +471,10 @@
"options__2": {
"label": "Ruch otoczenia"
},
"label": "Zachowanie obrazu"
"label": "Zachowanie obrazu",
"options__3": {
"label": "Stałe położenie tła"
}
}
}
},
Expand Down
5 changes: 4 additions & 1 deletion locales/pt-BR.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -471,7 +471,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"
}
}
}
},
Expand Down
5 changes: 4 additions & 1 deletion locales/pt-PT.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -471,7 +471,10 @@
"options__2": {
"label": "Movimento de ambiente"
},
"label": "Comportamento da imagem"
"label": "Comportamento da imagem",
"options__3": {
"label": "Posição de fundo fixa"
}
}
}
},
Expand Down
5 changes: 4 additions & 1 deletion locales/sv.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -471,7 +471,10 @@
"options__2": {
"label": "Omgivande rörelse"
},
"label": "Bildbeteende"
"label": "Bildbeteende",
"options__3": {
"label": "Fast bakgrundsplacering"
}
}
}
},
Expand Down
5 changes: 4 additions & 1 deletion locales/th.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -471,7 +471,10 @@
"options__2": {
"label": "การเคลื่อนไหวแวดล้อม"
},
"label": "พฤติกรรมภาพ"
"label": "พฤติกรรมภาพ",
"options__3": {
"label": "ตำแหน่งพื้นหลังได้รับการแก้ไข"
}
}
}
},
Expand Down
5 changes: 4 additions & 1 deletion locales/tr.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -471,7 +471,10 @@
"options__2": {
"label": "Ortam içinde hareket"
},
"label": "Görsel davranışı"
"label": "Görsel davranışı",
"options__3": {
"label": "Sabit arka plan konumu"
}
}
}
},
Expand Down
5 changes: 4 additions & 1 deletion locales/vi.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -471,7 +471,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"
}
}
}
},
Expand Down
5 changes: 4 additions & 1 deletion locales/zh-CN.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -471,7 +471,10 @@
"options__2": {
"label": "环境移动"
},
"label": "图片行为"
"label": "图片行为",
"options__3": {
"label": "修复背景位置"
}
}
}
},
Expand Down
5 changes: 4 additions & 1 deletion locales/zh-TW.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -471,7 +471,10 @@
"options__2": {
"label": "緩慢移動"
},
"label": "圖片行為"
"label": "圖片行為",
"options__3": {
"label": "固定背景位置"
}
}
}
},
Expand Down
19 changes: 16 additions & 3 deletions sections/image-banner.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
-%}

Expand Down Expand Up @@ -112,7 +116,12 @@
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'heading' -%}
<h2 class="banner__heading inline-richtext {{ block.settings.heading_size }}" {{ block.shopify_attributes }}>{{ block.settings.heading }}</h2>
<h2
class="banner__heading inline-richtext {{ block.settings.heading_size }}"
{{ block.shopify_attributes }}
>
{{ block.settings.heading }}
</h2>
{%- when 'text' -%}
<div class="banner__text rte {{ block.settings.text_style }}" {{ block.shopify_attributes }}>
<p>{{ block.settings.text }}</p>
Expand Down Expand Up @@ -321,6 +330,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",
Expand Down