Background Crossfade Elements & Transitions

We're sometimes asked how to make pages 'less blocky'. With traditional website CMS's this can be tricky as elements are based on blocks and they have to scale on mobiles.  In LOOP, you can use the Background Crossfade block, along with Background Image blocks to create dynamic and immersive branded pages.

You can use this anywhere you can add content blocks in the CMS.

Before you start

The Background Crossfade block is designed for longer / full page content. Each section needs more than a screen's worth of content, otherwise the page won't scroll far enough to trigger the change. If the transition isn't working, add more content to that section.

How it fits together

If you've used the Tab Layout block in the CMS then the Background Crossfade block works in the same way:

• Crossfade Section is the whole stretch of the page.
• Crossfade Section Items are the individual chunks inside it, each with its own background.
• Content blocks go inside each item, so you can use any blocks you like (text, panels, expanders, split panels and so on).

Step by step

1. Add the section. Click the plus icon where you want it, then choose Crossfade Section.
2. Add your section items. Create one item for each background you want visitors to scroll through.
3. Add content. Open each item and add the blocks you want to appear over that background.
4. Set the background. Click the cog on the section item and choose a background colour, image or video.
5. Preview. Scroll down the page to see the background fade from one item to the next.

Background options

• Colour: A solid background colour.
• Image or video: If you add one of these, it overrides the colour.
• Tint: You can add a tint to an image or video if you want it softer or need to fix contrast problems.

Two ways to fade

• Standard: The background switches as soon as the visitor passes a trigger point.
• Progressive: The colour fades gradually as the visitor scrolls. To use it, turn on progressive fading in the crossfade settings. It's a subtle touch that keeps the page flowing.

Watch your contrast

This is one of the few places in LOOP where you can pick any colour you like, but the content on top can't adjust automatically. For example, black text on a black background will be very hard to read.

There are two simple ways to avoid this:

• Use panels. Panel themes keep the text readable whatever the background. This is the easiest option.
• Change the theme on your content blocks. If you want a dark background, set a light text theme on each block inside that item.

Tips

• Keep colours subtle or consistent. Consistent colours or softer shades tend to look better on a real site.
• Use panels over image or video backgrounds so text stays easy to read.
• Think of it as an overall page effect, best suited to longer pages and landing pages.
• Have a play with it and let us know how you get on.