๐ย Bvlgari adds an elevated brand touch with ombre tiles that shift color while you scroll - see performance tips below
But first, check the full effect in this longer video and tell me youโre not hypnotized ;)
๐๐๐น๐ด๐ฎ๐ฟ๐ถ's PLP tiles use CSS gradient overlay for a luxe scroll experience ๐ if you try this, keep ๐ฎ๐ฐ๐ฐ๐ฒ๐๐๐ถ๐ฏ๐ถ๐น๐ถ๐๐ and ๐ฝ๐ฒ๐ฟ๐ณ๐ผ๐ฟ๐บ๐ฎ๐ป๐ฐ๐ฒ in mind:
๐๏ธ ๐๐ฟ๐ฎ๐บ๐ฒโ๐ฟ๐ฎ๐๐ฒ ๐ถ๐๐๐๐ฒ๐:
If using JS scroll listeners, make sure they're debounced or optimized (e.g. with IntersectionObserver) or they can cause jank and lag, especially on mobile
๐จ ๐ฅ๐ฒ๐ฝ๐ฎ๐ถ๐ป๐๐ & ๐๐ฆ๐ฆ ๐ฒ๐ณ๐ณ๐ฒ๐ฐ๐๐:
Using mix-blend-mode, large gradient overlays or changing styles per frame can trigger repaints that can be costly and add up across many tiles in a long product list
You may want to reserve this effect for smaller, themed lists or grid sections within a landing page (a few rows at a time, separated with banner images)
๐๏ธโโ๏ธ ๐ฅ๐ฒ๐๐ผ๐๐ฟ๐ฐ๐ฒ ๐น๐ผ๐ฎ๐ฑ:
Extra CSS, JS (for viewport scroll detection) and paint/tick cost increases the bundle size and memory footprint
You can reduce or eliminate JS with CSS scrollโlinked animations (view transitions, @scroll-timeline or scroll-snap) although this is not supported by all browsers (yet)
๐ฆพ ๐๐ฐ๐ฐ๐ฒ๐๐๐ถ๐ฏ๐ถ๐น๐ถ๐๐:
Users with motion sensitivities or low-contrast needs may be affected. Ensure you degrade gracefully or offer a โreduced motionโ mode
It is challenging to choose background colors that contrast with all product images - you may want to try it on specific themed collection pages where you have precise merchandising control over which products are included
๐ย Young N Sang takes a simpler approach, using the ombre tiles to create some visual separation between products, but without the animated effect
Find 186 more Category page ideas or keep browsing Featured ideas