Add Backdrop to Bring Focus to Important Element on Scroll in Oxygen

Updated - 17 Jan 2020, to include expanding effect & performance improvements.

Sometimes we may need extra focus given to a specific element on the page as the user scrolls down to it. One way is to add a backdrop which fades out all other elements and bring attention to one. This can be useful for call to actions or important notices.

Live Demo

This tutorial was suggested in our WPDevDesign facebook group and based on the call to action box found at the bottom of the post on Gevme.com

It's an interesting effect that does help bring focus to an important element. I originally was attempting to recreate the effect seen on the Gevme site, however, I found some usability flaws with the implementation;

1. The backdrop comes into visibility too early on large screens.
2. No way for the user to remove the backdrop without scrolling further.
3. Not a very smooth effect.

In the example from the Gevme site, the backdrop is made visible as soon as the element is visible at the bottom of the screen & removed again once the element reaches the top.

This can work in some cases, but in others, it may not be ideal - especially if the block has a small height. It could mean that the backdrop would be made visible before the user has finished reading the content that comes before it.

A better way to do it

A better way is to use the very center of the viewport to guide when the backdrop is activated instead of the top and bottom. As soon as the top of the element reaches the halfway mark and then when the bottom of the element reaches it.

This way the focus is on the element at the right time, and the backdrop will always be applied just as the element is passing where the reader's eye will be focused.

How to Create in Oxygen

These are the steps to create this in Oxygen;