Advanced Scroll Image

Advanced Scroll Image shows one image inside a fixed-height frame and moves the image inside that frame. Its one job is previewing long images such as full-page screenshots.

How to add the Advanced Scroll Image module

Open the Visual Builder and add a section and row.
Search for "Advanced Scroll Image" and add the module.
Upload the image in the Content tab.
Choose the Scroll Type in the Settings group.

Content

Content group

Upload Image: The image to scroll.
Image Alt Text: Alternative text for the image.
Show Direction Icon: Off by default.
Select Icon: The icon to show. Used when Use Icon Image is off.
Use Icon Image: Off by default. Uses an uploaded image instead of an icon.
Upload Icon: The icon image. Used when Use Icon Image is on.
Icon Animation: Off by default.

Settings group

Scroll Type: On Mouse Hover (default) or On Mouse Scroll.
Scroll Direction (hover): Bottom to Top (default), Top to Bottom, Left to Right or Right to Left. Used with On Mouse Hover.
Scroll Direction (scroll): Vertical (default) or Horizontal. Used with On Mouse Scroll.
Scroll Speed: Default 500ms.

Design

Image group

Image Height: Height of the frame. Default 200px.

Overlay group

Use Image Overlay: Off by default.
Background: The overlay color. Default is rgba(255,255,255,0.39).

Icon group

Icon Color: Default #2EA3F2.
Icon Size: Default 48px.
Border: Border and radius options for the icon.

FAQ

Why is the module empty on my page?

The image renders only when an image is uploaded. Without one the module outputs an empty wrapper.

Does Advanced Scroll Image work in Divi 4 and Divi 5?

The plugin includes a Divi 4 version and a native Divi 5 module with the same name. Divi 4 layouts convert to the Divi 5 module. This page describes the Divi 5 settings.

Can the icon be an image instead?

Yes. Turn on Show Direction Icon, then Use Icon Image, and upload the icon.