By the end of this you can make a photograph hold still, or drift, or blur as the reader scrolls past it — and you can switch that behaviour off on phones without editing a stylesheet.
Wrapper and section
Two paragraph types do the work. The Parallax wrapper carries an optional heading and the list of sections; a Parallax Section is one band, with a required image drawn from the media library and required body text rendered over it. Several sections in one wrapper give you a scrolling sequence.
Choosing the scroll effect
The Scroll Effect list holds fourteen options, and they are not all the same kind of thing:
- CSS Legacy Mode — the classic fixed-attachment look, done in CSS alone.
- Movement — Translate / Slide Up, Scale Up, Rotate, 3D Transformations.
- Appearance — Fade In, Fade In and Scale Up, Opacity Fade, Blur, Glow Effects, Shadow Effects.
- Timing and interaction — Smooth Transition and Timing Functions, Hover Interactions, Combined Effects.
Parallax Speed tunes whichever you pick — the field's own help gives 0.1 as slow and 2 as fast — while Background Animation Speed and Background Animation Easing (Ease, Ease-In, Ease-Out, Ease-In-Out or Linear) shape the motion curve.
Height, position and where it applies
- Background Image Height is required and takes a plain number.
- Background Image Height Unit supplies the unit — vw, vh, %, px, em or rem.
- Background Position places the picture inside that band.
- Breakpoints decides where the effect runs: all, or only from 576, 768, 992, 1200 or 1400 pixels upward.
That last one matters. Scroll effects cost the most on the weakest devices, so pinning them to 992 and above is a defensible default rather than a compromise.
Enable paragraph_bundle_parallax on Drupal 11.3 or 12 — it brings paragraph_bundle_image with it for the media type. Full field reference on the Paragraphs Bundles module page; for a Drupal 10 site, W3CSS Paragraphs is the version that still supports it.
Would rather have this configured for you? That is Drupal development — or get in touch.
