Part 1 of 3 writings.
- Creating a parallax effect with 3 images in WordPress
- How to create a sticky transparent navigation bar in WordPress
- Changing a text’s orientation to vertical
Demo site: https//krai.dwrf.my.id/
For this WordPress project, I take on the perspective of a website builder, not a theme builder, which I’ve previously written about in this post. This means I build my work on top of a certain theme, and make some necessary style customization along the way. The customization will be saved in the database, so even though the theme got updated, it wouldn’t impact the site’s design. This customization is called a user style and sits on top of a theme style. For this work I use WordPress version 6.5.4, Twenty Twenty-Four theme, and the latest version of the Gutenberg plugin, 18.6.1 as of this writing, to incorporate some of the features that are necessary for this project.
In this work, I want to showcase a hero section with a parallax effect that involves more than 2 images. This hero section takes inspiration from this site which was built on Webflow and based on this design. What I love about this hero is that it has these beautiful illustrations that create three layers of parallax effect.
I begin by creating and setting up the homepage and the necessary template. The Front Page template only consists of a content block and has its content constrained to the wide with by toggle on the inner block use content width setting. This template will act as a content placeholder and will render any content on a page that is being assigned as a homepage. Subsequently, I create a page and assign it as a static homepage in the Settings > Reading option. This will be our canvas on where we built our homepage.
Afterward, I began collecting all the necessary images from the Webflow site above, which are the sky, the mountain, and the bear images. I then place those images under a nested block of group and cover blocks. The group block will act as the parent block with the sky image as the background image. Fortunately, since WordPress version 6.4, the design tools have been expanded which includes having support for background image for the group block. and enhanced this feature with control of the size, repeat, and focal point options for background images in WordPress 6.5. To take benefit from this set of settings, I set the image size as cover and its focal point value to center (50% left, 50% top).
Underneath the group block, I put a cover block with the image of the mountains and set the image position to fixed. This is done by toggling on the fixed background setting on the right panel. Lastly, I added another cover block below the previous cover block and set the bear image to an absolute position by toggling off the fixed background setting and setting the image’s focal point to the bottom (50% left, 100% top). Finally, on top of this cover block, I then place the necessary hero text and button.
Here’s the final hero section with that parallax effect:
Leave a Reply