Add Parallax Effect to Background Image by Gutenberg Editor

From wordpress 5.0, new visual editor called Gutenberg Editor will be installed as default visual editor of wordpress. (It can be available by activating Gutenberg plugin in wordpress 4.9.) And it can make us add cover image block (background image block) from visual editor. Here, we will explain how to add parallax effect to background image added by Gutenberg.

Customized Parallax Cover Image Block

Let’s see how it works on Codepen.

Explanation

HTML

Gutenberg Cover Image HTML structure is below.

Now we will add css and js code to add parallax effect.

CSS

Add CSS below as custom css.

Javascript

Add JS Code below and all set!

 

Summary

It’s very easy to add parallax effect to cover image added by Gutenberg Editor. Please try it out!
If you like this post, please share it:)

Latest Posts