-
Notifications
You must be signed in to change notification settings - Fork 3.4k
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.
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 with Text] Add ambient movement to image #2385
Conversation
locales/en.default.schema.json
Outdated
"label": "Ambient movement" | ||
}, | ||
"label": "Image behavior" | ||
}, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
As noted in #2383 (comment), it might make sense to have these strings be global since they're re-used across a few Sections.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just noting that after conferring with @kmeleta, I've updated this to use new strings declared in sections.all.animation
(Commits 5fb7ea5 and fd8b916). We'll be using these for Image Banner, Image with Text, and Slideshow, so this cuts down on duplicate code.
The only new consideration here is just that we should focus on merging this before #2383, since that PR will also need to use these global strings.
{%- assign widths = '198, 432, 642, 900, 1284, 1800' -%} | ||
{%- capture sizes -%} | ||
(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 1.6667 }}px, | ||
(min-width: 750px) calc((100vw - 130px) / 1.667), calc((100vw - 50px) / 1.667) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The 1.6667
number here is admittedly a little weird. I could alternatively do calc(((100vw - 50px) / 2) * 1.2)
and get the same result if we think that's easier to read.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think it is easier to read 😅 I'm switching it in my PR for collage's ambient movement
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you Kjell!
Works well! I tested
- Focal point
- Different screen sizes
- Different file types
- Different image sizes
- Global theme settings
I'm unable to reproduce locally, or with a freshly-added section on the demo site. The padding value for that specific section on the demo site looks like it had been adjusted via the Sidebar. Mind giving it another look? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM 👍
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM! :D
locales/en.default.schema.json
Outdated
@@ -386,6 +386,18 @@ | |||
}, | |||
"sections": { | |||
"all": { | |||
"animation": { | |||
"label": "Animations", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I wonder if we should use the key label
here as this is used as a header content
on the schema. We usually keep a similar structure to what's used in our schema to make mapping easier. However, I see that just below we're using a section_padding_heading
which also doesn't map to anything, so, not a big deal right now 👀
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
No problem! We're waiting on translations anyway, so doesn't hurt to make it consistent now. Updated in e315fc6.
e315fc6
The translations came back but it looks like they're missing |
🎉 Thanks, everyone! |
* shopify/main: Gift cards/add recipient (Shopify#2412) Update 1 translation file (Shopify#2453) [Slideshow] Add ambient movement to background (Shopify#2383) Wrap calls to search results ind collection counts in paginate to reduce additional requests (Shopify#2421) [Header] Add app block in the header section (Shopify#2238) [Image with Text] Add ambient movement to image (Shopify#2385) Update 1 translation file (Shopify#2450) [Blog post section] Fix slides size on mobile (Shopify#2368) Duplicated scrollbar in drawer menu (Shopify#2400) [Header locales] Support gradients (Shopify#2386) [Image banner] Add ambient movement to background (Shopify#2342)
* Add ambient movement to image with text. * Switch to global animation string declarations. * Remove the old strings. * Update header key for consistency. * Update 17 translation files * Update 3 translation files * Update 18 translation files * Update 2 translation files --------- Co-authored-by: translation-platform[bot] <34770790+translation-platform[bot]@users.noreply.github.com>
PR Summary:
Adds an option for ambient animation to the Image with Text section's image.
ambient.mp4
Why are these changes introduced?
Closes #2340
What approach did you take?
Uses the same approach (and existing CSS) that was added in #2342.
This implements a new dropdown menu #2341. When "Ambient movement" is selected, a CSS class is applied to the Image with Text's image element, triggering a long-duration CSS animation that slowly moves the image around within its frame. As this feature is purely aesthetic, it supports the visitor's prefers-reduced-motion preference.
Like #2342, it also conditionally loads in a slightly higher-res image when the ambient animation is active, in order to account for the scale effect that's applied to the image.
Visual impact on existing themes
This feature is off by default. When it's turned on, the image with text's image will slowly animate ambiently.
Decision log
sections.all.animation
to avoid duplication.Testing steps/scenarios
Checklist