How to add scroll snapping only to an image-banner

Store Design
, , ,

Topic summary

A user wants to implement scroll snapping specifically for the second image banner on their Shopify homepage (fairpilzt.de). The desired behavior is:

  • Normal scrolling throughout the page
  • When reaching the second image banner, the top of that image should snap to the top of the browser viewport
  • After snapping, scrolling continues normally
  • Snapping should only occur on this specific banner, nowhere else

The user notes limited coding experience and that the site is still in testing.

Current Status:
One respondent provided CSS code for animating the image, but this doesn’t address the scroll snapping request. The user clarified with a screenshot showing they want the top portion of the image banner to snap to the browser top during scrolling.

The issue remains unresolved—no solution for implementing selective scroll snapping has been provided yet.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hey,

i wanted to add the scroll snapping effect only to the second image banner oon my homepage (https://fairpilzt.de)). I want that if you scroll everything is normal and then when you get to the second image-banner the top of the image schould snap to the top of the browser and then you can scroll further but it schould only snap on the second banner and nowhere else.

(I know the site look not very good we are still testing some things but it would help to know how to do it. I don’t have good experience with coding)

2

@1Bossa

In that section custom css you can add this CSS

.image-with-text__media>img {
    animation: animateAmbient 30s linear infinite!important;
}

Are you looking this the second image will animation like the first banner image.

3

Screenshot 2025-03-18 173835.png
Screenshot 2025-03-18 173835.png2517×1346 524 KB

I want this top part of the Image-banner to snap, while scrolling through the mainpage, to the top of the browser