feat: parallax scroll effect for hero backgrounds #48

Closed
opened 2026-06-04 12:01:44 +00:00 by jmiller · 1 comment
Owner

Summary

Add an optional parallax scrolling effect where the background (image, video, or color) moves at a slower rate than the page content as the user scrolls.

Requirements

  • New parallaxEnabled switcher field (showon all background modes)
  • New parallaxSpeed range field (0.1–0.9, default 0.5)
  • JS IntersectionObserver + scroll listener to translate the background layer
  • Disable parallax on mobile (performance) and when prefers-reduced-motion is set
  • CSS will-change: transform for GPU acceleration

Acceptance Criteria

  • Parallax toggle appears in module settings
  • Background moves slower than page scroll when enabled
  • No jank or layout shift on scroll
  • Disabled on mobile and reduced-motion preference
## Summary Add an optional parallax scrolling effect where the background (image, video, or color) moves at a slower rate than the page content as the user scrolls. ## Requirements - New `parallaxEnabled` switcher field (showon all background modes) - New `parallaxSpeed` range field (0.1–0.9, default 0.5) - JS IntersectionObserver + scroll listener to translate the background layer - Disable parallax on mobile (performance) and when `prefers-reduced-motion` is set - CSS `will-change: transform` for GPU acceleration ## Acceptance Criteria - [ ] Parallax toggle appears in module settings - [ ] Background moves slower than page scroll when enabled - [ ] No jank or layout shift on scroll - [ ] Disabled on mobile and reduced-motion preference
jmiller added the enhancementjoomla labels 2026-06-04 12:01:44 +00:00
Author
Owner

Branch created: feature/48-feat-parallax-scroll-effect-for-hero-bac

git fetch origin
git checkout feature/48-feat-parallax-scroll-effect-for-hero-bac
Branch created: [`feature/48-feat-parallax-scroll-effect-for-hero-bac`](https://git.mokoconsulting.tech/MokoConsulting/MokoJoomHero/src/branch/feature/48-feat-parallax-scroll-effect-for-hero-bac) ```bash git fetch origin git checkout feature/48-feat-parallax-scroll-effect-for-hero-bac ```
Sign in to join this conversation.
No labels enhancement joomla
Type
Status
Priority
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: MokoConsulting/MokoJoomHero#48