Create a unique background image sequence that animates on scroll with the Frame Scrubber widget. Once the widget is set up, website users can advance or "rewind" through frames using the scroll bar, mouse wheel, or another input device. This is a great alternative to fullscreen video backgrounds!
Widget Compatibility: Highly Compatible (No known issues when combining with other MuseThemes widgets)
Current Version: 1.0
Supported Devices: Desktop, Tablet, Phone
Release Log
1.0: Adds collapsible panel functionality and support for responsive Muse
Setup
Drag the widget from the library and drop into your project in Design mode.
You may notice that the widget container looks a little strange. The height of the widget container shows the entire scroll length of the space needed to animate the frame sequence from beginning to end. Note that you may want the page length to go a bit beyond the length of the widget container to ensure that the end of the frame sequence can be reached on page scroll.
The first setting in the widget option panel is Image Filename (Prefix). The file names of your image frames are important. They should be named something like “image001”. “image” being the prefix and “001” being the sequence number.
Use your favorite photo or video editor to create individual image frames from a video. There are a number of ways to do this. View the tutorial video above to see an easy way to do it using Photoshop.+
Once you create the images to use in the sequence, make sure the naming uses a prefix that matches the widget setting, and that the ordering is in 3 digits, like “001”. Use the File > Add Files For Upload option to add all of the images at once.
The Number of Frames setting should be matched to the overall number of image frames you create.
Let’s look at the Scrolling Options section:
Scroll Speed: This setting adjusts the animation speed. Lower settings create faster speeds.
Offset (Frames After Scroll): This setting sets the number of frames that animate once the scroll stops. These frames give sort of an “easing” feel for a subtle stop.
The Overlay Options section allows for an overlay to be used on top of the image sequence. You can use a color overlay, or a pattern overlay. The pattern overlay tiles the image into a pattern. Both color and pattern overlays offer opacity settings.
Once you’ve loaded all of the images and have set up the widget, preview in browser. You should see the images animate and look like video. Fine tune the Scrolling Options settings to get the image sequence to animate how you like.
Commonly Asked Questions
Frame Scrubber isn't working!
Make sure all of your frames are uploaded using File > Add Files for Upload. Also, be sure to use just 3 digits of numbers after the prefix in your file name.
Why does my page take so long to load?
The page has to load all of the images at once, so use the smallest file sizes possible for individual frames.