Parallax scrolling images are all-the-rage these days and Gutenberg has made it really easy to add this style of image to your posts.
On top of this, there are a number of settings that you can use to enhance the image further, including transparency and cover overlays.
I’ll explain parallax images a little more and give a quick tutorial on how to do it in Gutenberg.
Parallax describes the apparent change of position of an object when viewed from different angles. And using it on websites is becoming popular. W3schools.com defines it as…
Parallax scrolling is a web site trend where the background content (i.e. an image) is moved at a different speed than the foreground content while scrolling.
Some will say that a fixed image isn’t parallax, with some arguing it more than others, but that’s not an argument I wish to get into. Many sites use a fixed background as a parallax effect. Indeed, if we head back to W3schools.com again, they actually use background-attachment: fixed to create their parallax effect
Here’s a demo of where the background image is moving but at a slower speed. With Gutenberg, we’re going to fix the image instead, so it doesn’t move.
Here, we have our standard image. If your theme supports it, you can make it more impressive by setting it to a wide or full width output.
However, we want to use the block “cover image”. This is designed for adding punchy images at the top of posts, but it can be used anywhere within your post.
Ensuring the block is highlighted, check the block settings in the right-hand menu – you need to look for cover settings and overlay. The parallax style is added by switching on “fixed background”. Ensure the overlay colour is clear and opacity is zero.
This is the result…
You can also add opacity to your parallax image. Here is it, with 50% opacity…
Finally, with the same opacity, the same image with a blue overlay…
If you’re aware of a Gutenberg block that performs a non-fixed parallax effect on images, please let me know.
Thanks to Edd Hurst from Pragmatic for telling me about this feature.
Talk to me!