Infiniscroll is a unique scroller that allows a single panorama-style image to pan across a web page in a smooth continuous motion. With support for image dimensions far wider than actual page width, Infiniscroll can be used as a clever display of products, concepts, or portfolio samples that have been stitched into a single image in Photoshop or other photo editors.
Multiple images can also be enabled, allowing Infiniscroll to act as a slideshow with a one-of-a-kind look. Customization options include captions, timing, vertical scroll and more.
Widget Compatibility: Highly Compatible (No known issues when combining with other MuseThemes widgets)
Current Version: 1.1
Supported Devices: Desktop, Tablet, Phone
Release Log
1.1: Updated to expand scroll speed options, allow more than 3 images regardless of settings in multi-image mode, recalculate loading on browser resize to eliminate overlapping or broken images (06/16/2016)
Setup
Drag the widget from the library and drop into your project in Design mode.
The widget container controls the size of the scroller when previewed or published. Use the Muse Resize dropdown to set to None, Responsive Width, or Full Browser Width.
This widget has two modes:
Panoramic: Scrolls a single, wide format image continuously
We suggest using the widest image possible for Panoramic mode. If the width of the image is narrower than the width of the viewer’s browser window, the beginning/end of the image will be seen, potentially revealing a “seam.” Since there are a ton of screen sizes out there, it’s not realistic to give a minimum size, though we would aim for 2000+ pixels when possible. There is no maximum.
Multi-Image mode can give the look of a typical scroller if desired. We like the idea of creating the look of a never-ending carousel of items by loading the widget with images that feature products with identical backgrounds. This creates a seamless look. See our live preview for a great demo of this
Infiniscroll includes a caption panel built in. To use captions, enable captions using the checkbox near the top of the widget option panel. Style the look and content of the caption panel using the Caption Panel Configuration & Content sections.
Commonly Asked Questions
How did you create the parallax effect on the last sample in the live preview?
We used two stacked Infiniscroll widgets, set for opposite directions and using PNG files with transparency.
Why do the timing settings seem to work differently in the two modes?
The two display modes have to be built very differently, and involve very different transition types and math calculations. In short, it's best to play with the timing settings until you're happy with the results.
This widget works best with a little prep work. Use a photo editor to create wide-format images for the Panoramic mode, and to ensure that all images used in Multi-Image mode have the same height.
While the widget has a built-in caption panel, you can also build your own caption panel with text in Muse and place it over the Infiniscroll widget.