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.
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;
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 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.
These are the steps to create this in Oxygen;
Session expired
Please log in again. The login page will open in a new tab. After logging in you can close it and return to this page.
haven’t been able to make this work, will provide live site soon.
I built everything in Oxygen, maybe this is the issue.
Also does this get added to the same stylesheet as the earlier CSS?
or maybe in advanced > css?
.important-block {
position: relative;
z-index: 99;
}
it doesn’t matter how the CSS is added, you can use the visual UI on the element itself if you like. Both position relative and z-index controls are in the layout settings.
Can I have multiple ‘important-block’ classes on one page?
I’ve tied but only the first block works.
i’ll look into doing it for multiple elements and update the post.
Hey David, awesome effect and tutorial. I tried it and it works, however the backdrop is blocking everything else at all times (even in Oxygen).
I implemented it in the main template and thought that was the problem, but it has the same effect when adding the backdrop div to the home page only.
Here’s my URL if you want to take a look whenever you can https://wordpress-332905-1137319.cloudwaysapps.com
Hi, there was a mistake in the CSS. I’ve updated it now. Changed visibility: none to visibility: hidden;
Thank you David! it works great now. I will ship this by default for CTAs from now on. Keep up the awesome work!