Scroll Image

The Scroll Image module shows an image inside a frame of fixed height. The image is larger than the frame, so only part of it is visible. It moves when a visitor hovers the frame, or when they scroll inside it. Use it for long screenshots, full-page mockups and wide panoramas.

How to add the Scroll Image module

Add a section and a row, then add the Scroll Image module.
Upload an image under Content > Content.
Choose the Scroll Type under Content > Settings.
Set the frame height under Design > Image.

Content

Upload Image and Image Alt Text: the image and its alt text. Without an image the module shows an empty box.
Show Direction Icon: shows an icon that hints at the scroll direction. Off by default.
Select Icon: the icon to show.
Use Icon Image and Upload Icon: use your own image for the icon instead. Off by default.
Icon Animation: moves the icon back and forth along the scroll direction. Off by default.

Settings

Scroll Type: On Mouse Hover or On Mouse Scroll. Default is On Mouse Hover.
Scroll Direction: with On Mouse Hover, choose Bottom to Top, Top to Bottom, Left to Right or Right to Left. Default is Bottom to Top. With On Mouse Scroll, choose Vertical or Horizontal. Default is Vertical.
Scroll Speed: the time the image takes to move when a visitor hovers. Default is 500ms. It applies only to On Mouse Hover.

With On Mouse Hover, the image slides to its far edge while the pointer is over the frame and slides back when it leaves. With On Mouse Scroll, the frame has its own scrollbar and the visitor scrolls the image with the mouse wheel or by dragging.

Design

Image: Image Height sets the height of the frame. Default is 200px.
Overlay: Use Image Overlay adds an overlay layer over the image. Off by default.
Icon: Icon Color and Icon Size for the direction icon. Default is #2EA3F2 at 48px.