As a Mack Trucks content author, I want to incorporate a Parallax scrolling effect into designated images of the website, allowing me to create visually dynamic and engaging content in order to improve the user experience.
Acceptance Criteria
User AC:
[ ] As a website users, when I scroll down the page, the content sections move over the background image in a Parallax manner, revealing different parts of the image from top to bottom or vise versa.
Editor AC:
[ ] As a website editor, I can use this block on any page.
[ ] As a website editor, I can find this block in the AEM Sidekick library.
Non-functional AC:
[ ] The block will be named: Parallax Scrolling
[ ] Parallax Viewport is:
Desktop: 360px height
Mobile: 160px height
[ ] Image Asset Sizes: 4:3 — 1440 x 1080 px @4x
[ ] The Parallax effect is responsive and works well across different devices and screen sizes.
[ ] The design should prioritize usability and accessibility, ensuring that the Parallax effect enhances the user experience without being distracting or impairing readability.
[ ] The Parallax effect should animate smoothly as users scroll down the page, revealing the background image from bottom to top or vice versa.
Out of scope
No response
Note
Image Asset Considerations:
The parallax effect only reveals part of the image at a time so careful consideration to select images that are textural, ambient or have small and centered focal point is crucial.
Context/Description
As a Mack Trucks content author, I want to incorporate a Parallax scrolling effect into designated images of the website, allowing me to create visually dynamic and engaging content in order to improve the user experience.
Acceptance Criteria
User AC:
Editor AC:
Non-functional AC:
Out of scope
No response
Note
Image Asset Considerations: The parallax effect only reveals part of the image at a time so careful consideration to select images that are textural, ambient or have small and centered focal point is crucial.
Technical details
No response
Attachment / link to Figma
https://www.figma.com/design/oNwe2jHIICPMIe551EY62l/Mack-Reskin---Full-Project?m=dev&node-id=14214-16283