Hero Slider, Scroll Video, Scrolling Glass Slides and Floating Spheres settings

Four widgets in the Effects group of the Add panel make big, eye-catching sections. Hero Slider is a full-width hero with cross-fading photos and a glass panel. Scroll Video plays a video forward and back as visitors scroll. Scrolling Glass Slides pins a full-screen stage and changes the slide as visitors scroll. Floating Spheres shows items as gently bobbing orbs.

Each ends its Design panel with Spacing and Animations & Effects, explained in Widget design panel basics and Animations and effects. Title, description and text sections use the standard text controls explained there too.

Hero Slider

Background photos cross-fade behind one glass panel. The panel's title, description and button change with each slide. Cards on the right preview the next two slides, and visitors can click one to jump to it.

How to add it

1. Click Add, open Effects, and drag Hero Slider onto the page. It starts with 3 slides.
2. Click Manage Slides.
3. Choose Manual slides or From a collection at the top.
4. For each slide, fill in Title, Description and the photo. Click Done.

Manage Slides

• Title and Description for each slide.
• Preview card text (optional): the text on this slide's preview card. Blank uses the start of the description (up to 60 characters).
• Add image and Focal point: the slide's background photo and which part stays in view when it's cropped.
• Show button and Button text, with a link. Default text "Learn More".
• From a collection: pick a Collection and map its fields to Title, Description, image and button. Collection slides link to each item's page unless you map a link field.

Under the slide list, Slideshow:

• Autoplay (pauses while a visitor hovers or tabs into it): on by default.
• Time per slide: 3 to 20 seconds. Default 6.
• First slide's title is a: Heading 1 (page title), Heading 2 or Paragraph. Default Heading 1. The other slides' titles look the same but aren't headings, so the page keeps one Heading 1.

Slider

• Height: 320 to 1200 px, per screen size. Default 720 desktop, 640 tablet, 720 phone.
• Cross-fade: 200 to 2000 ms. Default 800. How long one photo takes to fade into the next.
• Show arrows: previous and next arrows. On by default.

Overlay

• Overlay color: default black.
• Darkness (left side): 0 to 100%. Default 60%. The overlay is darkest on the left, behind the panel, and fades to a sixth of that on the right.

Glass Panel

• Glass: None, Light or Dark. Default Dark.
• Tint: 0 to 90%. Default 25%. Shows when Glass isn't None.
• Blur: 0 to 40 px. Default 14. Shows when Glass isn't None.
• Max width: 240 to 1000 px, per screen size. Default 650.
• Padding: up to 96 px, per screen size. Default 40 desktop, 24 phone.
• Corners: 0 to 48 px. Default 20.

Preview Cards

Starts closed.

• Show the next two slides as cards: on by default.
• Corners: 0 to 40 px. Default 16.
• Border color: default white.

Title and Description

Both start closed. Text controls for the slide title (size up to 120 px; default 50 desktop, 42 tablet, 32 phone, bold) and the description (up to 48 px; default 20, 17 on phones).

Button

Starts closed. Button style (from the site theme): Primary or Secondary. Default Primary.

Preview Title and Preview Text

Show only when preview cards are on. Text controls for the card title (up to 40 px, default 17 bold) and card text (up to 32 px, default 14).

Scroll Video

The video stays on screen while visitors scroll, and scrolling plays it forward or back. It works with a mouse wheel, touch, the keyboard and the scrollbar, and it never takes over the page's scrolling.

How to add it

1. Drag Scroll Video from Effects onto the page.
2. Click Choose Video.
3. Under Video file, click Choose video and upload an MP4 or WebM file, or pick a client video or one from the site's library. Clips up to 30 seconds play smoothly. A longer clip plays its first 30 seconds.
4. Optional: add a Poster image with + Poster image. Use Replace or Remove to change it. With no poster, the video's first frame is used: on the first paint, for visitors with reduced motion, and on the editor canvas.
5. Fill in Description (for screen readers), or leave it blank if the video is decoration. Click Save.

Smooth scrolling

When you choose a video, ContentForge prepares it for smooth scrolling in the background. It turns the first 30 seconds into up to 450 still frames, sized for computers and phones. Under the video field, Choose Video shows where it's at:

• Preparing smooth scrolling… 40%: it's working. It usually takes a minute or two. You can keep editing, save and publish. Until it's ready, the video still scrubs, just less smoothly.
• Smooth scrolling is ready (450 frames).: Preview and the live site use the frames. For a clip longer than 30 seconds it adds "This clip is 48 seconds — scrolling plays its first 30."
• Smooth scrolling couldn't be prepared: …: the reason follows, for example "the video is too short." Click Try again, or choose another video.

While it's preparing, the canvas badge in Edit mode also says Preparing smooth scrolling…. Videos already on a page get theirs the first time the page opens in the editor, or when the site is published.

On the live site the frames only start loading when the widget is close to the screen. The poster, or the video's first frame, shows straight away. There's no loading bar. While the frames are still being prepared, the video scrubs from frames taken in the visitor's browser, and those fill in as it scrolls. A small spinner shows in the corner only if nothing has loaded after a moment.

Scrubbing

• How scrolling plays it:
  • Pin while scrolling (default): the video stays pinned while visitors scroll past it, and plays through over the scroll length. The widget is taller than the video by that much.
  • Capture the scroll: the video keeps its own height. While it's on screen, scrolling over it plays the video first, then the page scrolls on.
• Scroll length: how many screens of scrolling play the whole video. More = slower. Pick Slow (8 screens), Normal (5, the default) or Fast (3), or set 1 to 15 screens with the slider. It's counted in screens, so it feels the same on a phone and a computer. At Normal, a 30-second clip plays about 6 seconds of video per screen of scrolling. Scroll Videos made before this setting keep their old speed, converted to screens; ones still on the old default use the new Normal.

Video Stage

• Height: Full screen (default) or Set height.
• Stage height: 150 to 1200 px, per screen size. Shows with Set height. Default 600 desktop, 420 phone.
• Video fit: Fill (may crop) (default) or Fit (whole video).
• Stage background: shows around the video with Fit. Default black.

Edge Fade

Starts closed. Fades each edge of the video into the page.

• Top, Bottom, Left, Right: 0 to 50% each. Default 0 (no fade).

Progress Bar

Starts closed.

• Show progress bar: a thin bar that fills as the video plays. On by default.
• Fill color: default white.
• Track color: the empty part. Default see-through white.
• Bar height: 1 to 12 px. Default 3.

Scrolling Glass Slides

A full-screen stage stays in place while visitors scroll, and each bit of scrolling moves to the next slide. Each slide has a photo, a title, text and an optional button on a glass panel. It uses ordinary scrolling.

How to add it

1. Drag Scrolling Glass Slides from Effects onto the page. It starts with 3 slides.
2. Click Manage Slides. You can add several photos at once; each becomes a slide.
3. For each slide, set the photo, Focal point, Title, Text and an optional button. Click Done.

Manage Slides

• Up to 12 slides. At 12, the list says "Up to 12 slides."
• Manual slides or From a collection, the same as Hero Slider.

Under the slide list, Scrolling:

• Transition: Fade, Slide up, Zoom, Rotate, Blur or Disintegrate. Default Fade.
• Scrolling per slide (% of the screen): 40 to 300%, in steps of 10. Default 100%. More means visitors scroll further before the slide changes.
• Keep the first slide's text on every slide: the panel stays put and only the photos change. Off by default.
• First slide's title is a: Heading 1 (page title), Heading 2, Heading 3 or Paragraph. Default Heading 2.

Stage

• Height (% of the screen): 40 to 100%, per screen size. Default 100%.
• Image fit: Fill (default) or Whole image.
• Image overlay: the overlay color. Default black.
• Overlay darkness: 0 to 90%. Default 20%.

Glass Panel

• None, Light or Dark. Default Light.
• Tint: 0 to 90%. Default 25%. Shows when the glass isn't None.
• Blur: 0 to 40 px. Default 16. Shows when the glass isn't None.
• Width: 240 to 1000 px, per screen size. Default 560 desktop, 520 tablet, 340 phone.
• Padding: up to 96 px, per screen size. Default 40 desktop, 24 phone.
• Corners: 0 to 48 px. Default 20.
• Horizontal position: Left, Center or Right, per screen size. Default Left on desktop, Center on phones.
• Vertical position: Top, Center or Bottom, per screen size. Default Center.

Progress Bar

Starts closed. Show progress bar (on by default) and its Color (default white).

Title, Text and Button

All start closed. Title text controls (up to 120 px; default 48 desktop, 40 tablet, 30 phone, bold). Text text controls (up to 40 px; default 18, 16 on phones). Button: Primary or Secondary from the site theme.

Floating Spheres

Items shown as round (or star, triangle, octagon or diamond) orbs that bob gently up and down, each with a title, a description, an optional photo and a button. It's built without any script.

How to add it

1. Drag Floating Spheres from Effects onto the page. It starts with 3 spheres.
2. Click Manage Spheres. For each sphere fill in Title, Description and, if you like, Color (optional, e.g. #6366f1). Blank uses the widget's color.
3. Add a photo, a button, or turn on Link this sphere to make the whole sphere a link. Collection spheres link to each item's page.

Look

• Glowing orb (default) or Frosted glass.
• Shape (Glowing orb): Circle, Star, Triangle, Octagon or Diamond. Default Circle.
• Light glass or Dark glass (Frosted glass). Default Dark glass.
• Glass tint: 0 to 90%. Default 40%. Frosted glass only.
• Blur: 0 to 40 px. Default 20. Frosted glass only.
• Color (items can set their own): default the theme's primary color.
• Size: 80 to 400 px, per screen size. Default 200 desktop, 170 tablet, 160 phone.

Grid

Starts closed.

• Spheres per row: 1 to 6, per screen size. Default 3 on desktop and tablet, 1 on phones.
• Gap: up to 120 px, per screen size. Default 48.
• Most shown (0 = all): 0 to 24. Default 0.

Motion

Starts closed.

• Float distance: 0 to 40 px. Default 14. Set 0 for still spheres.
• Float speed (seconds per bob): 2 to 15 seconds. Default 6.
• Grow on hover: on by default.

Title

Starts closed. Where the title sits: Above, Inside (default) or Below the sphere. Its tag: H3 (default), H4 or Text. Then text controls (up to 60 px; default 24 bold, centered).

Description and Button

Both start closed. Show descriptions (on by default) and their text controls (up to 32 px; default 15, centered). Button: Primary or Secondary.

Examples

• A travel agency: Hero Slider with one slide per destination, autoplay every 6 seconds, preview cards on.
• A product launch: Scroll Video with a 20-second turntable clip, pinned, so the product spins as visitors scroll.
• A builder's process: Scrolling Glass Slides with 5 steps, Slide up transition, the panel on the left.
• A firm's values: Floating Spheres with three glowing orbs, Innovation, Quality and Trust, each in its own color.

Limits and what it can't do

• Scroll Video plays the first 30 seconds of a video. Longer clips are cut to their first 30 seconds.
• Scroll Video plays uploaded MP4 or WebM files only. YouTube, Vimeo and other video players can't be scrubbed. See Use video on a site for other video widgets.
• Scrolling Glass Slides has up to 12 slides.
• Floating Spheres shows up to 24 with Most shown; 0 shows them all.
• Hero Slider's other slides aren't headings. Only the first slide's title can be the page heading.
• Visitors whose device asks for less motion get a still version: Scroll Video shows its poster, the slides cut instead of animating, and the spheres stay still.
• None of these can be connected with Connect to Data. To fill them from a collection, use From a collection in Manage Slides or Manage Spheres.

Who can use it

Anyone with the Mount Olympus tool. Client people need Editor to add these widgets or change their design. Widget content lets them change the slides, the video and the spheres.

Troubleshooting

• "YouTube, Vimeo and other video players can't be scrubbed — upload the video file (MP4 or WebM) instead.": Scroll Video needs a video file. Upload the MP4 or WebM in Choose Video.
• "Enter a full video file URL (https://…).": the video address isn't a full link. Pick the video again from the library.
• "Scroll Video — use Choose Video to upload an MP4 or WebM file.": no video yet, or the one set can't be used.
• The scroll video is jerky: check Choose Video for Smooth scrolling is ready. While it still says Preparing smooth scrolling… the video scrubs less smoothly. When it's ready, if it still plays too fast, choose Slow under Scroll length or drag the slider up.
• "Smooth scrolling couldn't be prepared: the video couldn’t be downloaded.": the video's address no longer works. Choose the video again, then click Try again.
• "Smooth scrolling couldn't be prepared: this video couldn’t be read — use an MP4 or WebM file.": the file is damaged or in a format that can't be read. Export it again as MP4 and upload that.
• The scroll video plays too fast: open the Design panel > Scrubbing > Scroll length and choose Slow, or drag the slider up.
• The page feels very long under the scroll video: that's the Scroll length in Pin while scrolling. Choose Fast or lower it, or switch to Capture the scroll.
• The hero doesn't change slides by itself: turn on Autoplay in Manage Slides. It also pauses while a visitor's mouse is over it.
• Can't add another slide to Scrolling Glass Slides: it's at the 12-slide limit.
• Text is hard to read on a slide: raise Darkness (left side) or Overlay darkness, or choose a Dark glass panel with more Tint.
• The spheres don't move: check Float distance isn't 0. Visitors who turn off motion in their device settings see still spheres.