Views Parallax (VVJP) applies a scroll-driven parallax background effect to a Views row set, built in pure vanilla JavaScript with no jQuery. It requires Drupal 11.3 or 12, and it is free on drupal.org.
What it does
VVJP adds a Parallax display style to Views. Rows render with a background image that scrolls at a different rate than the page content in front of it — the classic parallax depth effect — with a configurable scroll effect layered on top: fade-in, scale, rotate, a 3D transform, shadow, glow, or a combined transition. With the right layout configuration it can also run full-width, the way Views Hero does, so a parallax section can double as a full-bleed page header rather than only a contained content block.
Requirements
| Requirement | Value |
|---|---|
| Drupal core | ^11.3 || ^12 |
| PHP | 8.3+ |
| Core modules | Views, Filter |
| Required contrib module | VVJ Core (vvj_core) — not optional |
VVJP requires VVJ Core and will not enable without it present. VVJ Core is the shared foundation every VVJ v2 module builds on — the abstract style plugin base, the accessibility helpers, and the JavaScript custom-element base that VVJP's scroll and animation code attaches to. It is not useful on its own. Composer resolves it automatically:
composer require drupal/vvjp:^2.0A manual tarball install skips that resolution — download and enable vvj_core yourself alongside vvjp, or the module will not enable.
Drupal 10 is not supported by this version. VVJP 2.x is built on the Views #[ViewsStyle] attribute plugin system, which is what Drupal 12 requires now that annotation-only plugin discovery has been removed. A Drupal 10 site needs the 1.x branch, or an upgrade first — Drupal 10 to 11/12 upgrades are work I do.
Setting up the view
| Requirement | Detail |
|---|---|
| Format | Row style, with at least two fields |
| First field | A URL to the background image — use the "URL to image" formatter, not an Image or Responsive image formatter (the reverse of what Views Hero expects) |
| Remaining fields | Grouped as the parallax content overlaying the background |
| CSS class | vvj-parallax, alongside Views' own js-view-dom-id; a visible class is added to content once it has scrolled into view |
| Pagination | Not supported with this display style — limit the item count in the view's Pager settings instead, both for correctness and for scroll performance |
| Not supported | Views' "Grouping Field" option — leave it off |
Configuration
- Parallax speed — a numeric multiplier (for example
0.1for a slow drift,2for a fast one) controlling how quickly the background moves relative to the scroll. - Background position — center, top, bottom, left or right.
- Overlay color and opacity, applicable to the whole background image or only beneath the parallax content, depending on configuration.
- Background animation speed and easing — linear, ease, ease-in, ease-out.
- Scroll effect — fade, scale, rotate, 3D transform, shadow, glow, or a combined effect, applied as content enters the viewport.
- Section height, in viewport-height units or other CSS length units.
- Breakpoints — a maximum screen width at which the parallax effect switches off and the section behaves as a normal stacked block; set to "none" to keep it active at every width.
Accessibility
Scroll-driven motion effects are a common accessibility failure point, and VVJP addresses it directly:
- ARIA roles and properties give screen readers context and state for the parallax content, independent of the visual scroll effect.
- Keyboard navigation reaches everything the parallax section exposes, without depending on scroll or hover.
- Focus management keeps the currently relevant content properly focused as the section scrolls into and out of view.
Custom tokens for Views header and footer
Views' native "Use replacement tokens from the first row" option, on a Global: Text area or Global: Unfiltered text field, does not work against Parallax output. VVJP ships its own token set:
[vvjp:title]- Replaces the default
{{ title }}token. [vvjp:field_image]- Replaces
{{ field_image }}, and the pattern extends to any field's machine name. [vvjp:title:plain]- Append
:plainto strip HTML from the resolved value.
A field with a complex rewrite (Global: Custom text using its own {{ tokens }}) is not supported — use the individual field token instead. Resolution runs through the shared vvj_core.token_resolver service, though the token syntax is unchanged from the 1.x branch.
Installation
composer require drupal/vvjp:^2.0
drush en vvjp -y
drush crComposer installs vvj_core automatically. Then edit or create a view, choose Parallax in the Format section, set the item limit under Pager, and configure the format settings.
Common questions
Why does pagination not work with Parallax views?
The display style is not built to page a scroll-driven background effect — it is meant for a bounded set of sections on one page. Limit the row count in the Pager settings rather than relying on a pager.
Can I use an Image field instead of a URL field for the background?
No — Parallax specifically requires the first field formatted as a URL to image, unlike Views Hero, which requires the opposite (an Image or Responsive Image formatter). Using the wrong formatter is the most common setup mistake between these two modules.
Does the parallax effect run on mobile?
Only if you let it. The Breakpoints setting lets you disable the effect below a chosen screen width, which is worth doing for both performance and motion-sensitivity reasons on small screens — or set it to "none" to keep it everywhere.
Is this compatible with Drupal 10?
No. core_version_requirement is ^11.3 || ^12. Stay on the 1.x branch on Drupal 10, or upgrade core first.
Does Grouping Field work with Parallax views?
No — this is a stated limitation of the current implementation, shared with the other VVJ display styles. Leave it off.
Related VVJ display formats
For the same full-width treatment without the scroll-driven background, see Views Hero. For presenting a Views row set as a gallery instead of a scrolling section, see Views Lightbox. If your parallax sections belong inside Paragraphs rather than Views, Paragraphs Bundles ships a comparable component as a paragraph type.
Want a parallax section tuned for a real site instead of configured by trial and error, or a Drupal 10 to 11/12 upgrade cleared first? See my Drupal services or get in touch.
