This project is not covered by Drupal’s security advisory policy.

Scroll Video Banner lets you create smooth scroll-driven video animations using multiple short video clips. Each scroll chapter triggers a video segment, creating a fluid animation without seeking through a continuous video timeline.

Features

  • Use up to 5 video clips per banner.
  • Define when each clip starts using scroll percentages.
  • Configure playback speed for each clip.
  • Add optional title, description, and poster image.
  • Choose different behaviors for mobile devices.
  • Lazy-load videos for better performance.

Unlike solutions that seek through a single video based on scroll position, this module plays each clip normally and transitions between them, providing smoother playback.

Post-Installation

After installation, create a Scroll Video Banner block through the Custom Block Library. Select your video clips, configure the scroll chapters, choose the mobile behavior, and place the block using the standard Drupal block layout system.

Additional Requirements

  • Drupal 10.3+ or Drupal 11.
  • Media
  • Media Library
  • Block Content

No external libraries or FFmpeg are required.

Recommended modules/libraries

No additional modules or libraries are required.

Similar projects

Demo 1

https://codepen.io/marduklien/pen/MdvdEG

Demo 2

https://codepen.io/Maltsbier/pen/dyYmGGq

Demo 3

https://noverahome.org/

Scroll Video Banner lets you create smooth scroll-driven video animations using multiple short video clips. Each scroll chapter triggers a video segment, creating a fluid animation without seeking through a continuous video timeline.Unlike traditional scroll-controlled video implementations, which map the scroll position directly to a video's timeline, Scroll Video Banner uses independent video clips as animation chapters. Each chapter plays forward normally and transitions to the next as the user scrolls, providing a smoother and more reliable experience.

Supporting this Module

This is an open-source Drupal project Supported by ImageXmedia.

Post-Installation

After installing the module, you can create a Scroll Video Banner block through the Custom Block Library.

The module also includes an optional demo module that provides a ready-to-use example of the scroll video effect. Enable it with: 

drush en scroll_video_banner_demo

The demo creates a working example so you can see how the module behaves before creating your own banner. It includes sample video content.

To create your own banner, select your video clips, configure the scroll chapters, choose the mobile behavior, and place the block using the standard Drupal block layout system.

Supporting organizations: 
ImageX

Project information

Releases