I was scrolling through the KPR-verse website when I noticed this cool effect at the bottom. Whenever I see something like this, I always want to recreate it. My process is simple: I start by trying to replicate the effect, then make a blog to explain how it’s done, aiming to break down complex designs into easy-to-understand steps.
At first, I often doubt whether I can pull it off, but after some deep thought, I usually find a way to break the design into pieces. By connecting those pieces, I manage to achieve the effect. Enough talk — let’s dive into how you can make it yourself!
Breaking Down the KPR Verse Footer Effect
At the end of the site, you’ll find the KPR banner in the background. At first glance, it might seem a bit complex, but it’s not that complicated.
First, create a div with the class .container. This will be the root element for our tutorial.
Next, divide the .container into two parts: .subcontainer-wrapper and footer. The footer element will hold the KPR banner.
Now, further divide the .subcontainer-wrapper into two parts. The upper part contains all the content for our website, while the lower part is left blank with no background—essentially invisible, but it still has the width and height of the viewport. The lower half is crucial because it allows us to see the footer.
Up to this point, all the elements are in the normal HTML flow, i.e., top-to-bottom. Now, we need to break this order by placing the footer behind and bringing the .subcontainer-wrapper in front. To do this, we'll set the .subcontainer-wrapper to position: absolute relative to its parent .container. This will remove the .subcontainer-wrapper from the normal DOM flow.
That’s all we need to set up the effect. Now, fill the upper part of the .subcontainer-wrapper with content, but leave the lower part—the invisible div—empty. Also, add content to the footer.
Once you’ve added the content, it should look something like this.
The upper part hides the background, and as you scroll down, when the visible content ends, the invisible section reveals the footer. Voilà! There you have it — simple and easy.
_Thanks for following along! I hope you found this guide helpful and easy to understand. Stay curious and keep exploring!
original: KPR-verse
Demo site: Demo Link , For this demonstration, I used the Google I/O site (https://io.google/2024/) and adapted it to showcase a similar concept.
Source code: Github Link_
Top comments (0)