Templates in the Brine family use a special visual effect on header images called parallax scrolling. Parallax scrolling involves a background image moving slower than the content in the foreground, creating an illusion of depth and immersion.
Here's an example of parallax scrolling in the Burke template:
Before you begin
- To learn if your template supports parallax scrolling, see our list of templates in the Brine family.
- When you enable parallax scrolling, it affects all banners on your site.
- Parallax scrolling works on mobile.
- The discontinued Marquee family (Marquee, Adversary, Alex, Eamon, Ginger, Mint, Shift) also supports parallax scrolling. To learn more, visit the Marquee template guide.
Parallax scrolling is available on pages that support banners:
- Index Pages (background images behind Regular Page sections)
- Regular Pages
- Products Pages
- Events Pages
- Album Pages
- Blog Pages
- Gallery Pages
Enable or disable parallax scrolling
If the banners on your site aren't showing the parallax effect, enable it in the Brine family's Site Styles:
- From the Home Menu, click Design, then Site Styles.
- Scroll down to the Main: Overlay section.
- Check Enable Parallax.
- You may also want to check Parallax Smart Crop to minimize cropping.
- Click Save.
To disable parallax scrolling for your site, follow the same steps but uncheck Enable Parallax.
Add thumbnail images
To create the parallax effect, add a thumbnail image to your page or section:
- Thumbnails added to a page create a page banner
- Thumbnails added to Index content sections create a background image.
If you don't see the parallax effect, ensure it's enabled.
Tip: Learn how to change the height of page banners and Index sections.
Heighten the effect
There are several ways to heighten the effect of the parallax scroll.
Mix parallax scrolling images with content and images that don't parallax scroll. The content moving faster appears to slide over the parallax images.
For example, in an Index you can mix parallax-scrolling content sections with non-parallax gallery sections, or with content sections that don't have background images. Learn more in the Brine template guide.
Add overlay content
Another way to enhance parallax scrolling is adding text, buttons, or other content to the image as an overlay. This content scrolls at the same speed as the rest of the page, faster than the image. In the Brine family, you can add this content with blocks:
- Banners - Add content to the intro area.
- Index Page sections - Add content to the page content area.
Add a color filter
You can add a color filter to all banners on your site with the Overlay Color tweak Main: Overlay section of Site Styles.
To understand how cropping affects parallax images, it helps to think of your site as a piece of paper with a rectangular hole cut out of it. The parallax image is a separate layer underneath, which is only visible through the hole in the paper.
For the paper to scroll faster than the image, the image needs to be taller than the hole. The extra space at the top and bottom of the image is what gets revealed as you move the paper up and down.
Because of this, cropping and focal point changes may not have a noticeable impact on a parallax scrolling image's position. Your site is designed to ensure that the image has margins on the sides so it can display the parallax effect.
Tip: Check Parallax Smart Crop in Site Styles to minimize cropping on the left and right.
If you're seeing scrolling issues when parallax is enabled, you may need to reduce the size of the page. Browsers can have issues loading heavy pages with parallax, especially if the total page size is 15 MB or more.