Follow along and you will have a hero banner rendered from a View — background image, positioned overlay, tinted scrim and an animated entrance — without a custom template.
The field order that makes it work
Set the Format to Views Vanilla JavaScript Hero and the row style to Fields. The first field must be an image, because it becomes the hero background; every field after it is rendered into the content overlay. Get that order wrong and you get an overlay with nothing behind it, which is the single most common setup mistake with this format.
Layout, position and animation
- Max Width (px) caps the hero itself, while Max Content Width (%) caps the overlay inside it.
- Minimum Height is a number paired with a unit — Viewport Width (vw), Viewport Height (vh), Pixels (px), Ems (em) or Root Ems (rem).
- Hero Card Width (px) turns a multi-row hero into cards; leave it at zero for a full-width list.
- Overlay Position gives eleven placements: Middle, Left, Right, Top, Bottom, the four corners, Top Middle and Bottom Middle.
- Hero Style selects the entrance animation, Hero Animation Speed takes 0.1 to 2 seconds, and Animation Easing offers Ease, Linear, Ease-in, Ease-out and Ease-in-out.
- Overlay Background Color and Overlay Background Opacity are combined into one rgba value for the scrim.
One caveat the settings form tells you about
The Overlay Position help text warns that sliding animations and centred content do not always agree, because of how the CSS transforms compose. If Middle plus a slide animation looks off, that is expected behaviour, not a bug — pick a different animation or a different anchor.
Requirements
Straight from vvjh.info.yml: core_version_requirement: ^11.3 || ^12 and php: 8.3, with dependencies on core Views, core Filter and VVJ Core. There is no deep-linking section on this format, which is consistent — a hero has no panel to open.
Next step
See the Views Hero module page for the defaults, and if you are unsure which height unit to pick, CSS Units Explained covers vw, vh, px, em and rem.
Need this built into your own site? See Drupal development services, or request a quote.
