Make Simple Web Design Into Parallax To Look Cool

Hello everyone, this time I want to share my experience of transforming a simple website design into a website that looks parallax. I’m Tri Sumaryadi, a UI/UX and visual designer, and I invite you to join me on this journey of infusing character and energy into your web creations. Let’s elevate your design game together.

Frist, you need to make a simple design, just like this :

If you want know how to design this one, you need to go here: https://medium.com/@sumaryaditri/make-a-simple-furniture-landing-page-site-design-in-figma-8855836ee4ee. Or you have another one, that’s totally fine too.

First, if you have a hero image like me, a hero image that you randomly downloaded from a site out of nowhere, you need to make a separate the furniture. The best way to do that is using a remove background plugin.

Next, duplicate the parts of each piece of furniture, and then combine with the same positions.

After that you need to make a component with these of image, then make a variant.

Then, you need to move the image in the second variant randomly.

In my case, I make the second one to become large, and I rotate the dresser 180 degree. Now you have one moving image.

Now, duplicate the second image, and make the image large, and make the frame on the top , then create this one component, create the variant, and make the image in this variant to look below

Repeat this process ’til your last card.

In my case, I have a special card. For this special card, I use a special treatment to make animation of this card, look special.

To do that, first you need to move the frame to the top, just like before.

Then, make the card inside move away from each other and then clip the frame.

After that, make a component and variant of this card, and make the second card just like before.

Yeay, you made a whole card are moving now.

Now, go to the asset menu, and take out all existing assets.

After that, replace all the elements on the desktop page with your new assets.

Make a new desktop frame, then move the header menu from earlier frame to the new desktop frame. Then make the earlier frame to be component.

Click on the header menu, then click the prototype and make them fixed and no scrolling.

After that move all the earlier stuff to to the new desktop menu, but firstly make this desktop frame clipped.

So the component will be show to the bottom, and that’s all good.

And then, make a duplicate the desktop frame, click component and move it to a bit of the top.

Click the image and then choose to the another variant that we make earlier.

After that duplicate again the desktop frame, then move the component frame to a little bit a top, then click on the card, then click variant2, just like before.

Repeat this process to the last special card, in my case ’til you have 5 desktop frame.

The last step is you need to connect the between desktop in prototype menu, then you need to connect the component frame, not the desktop frame, then choose on drag, then pick the smart animate one.

After that you do the same if you want to restore the page to the previous one.

Repeat this process ’til the last page, just like this

And here we are, the parallax effect has ben insert to your design page.

Alright guys, this is the end of my story, remember that adding a touch animation such of parallax can effortlessly elevate your website’s cool factor. Now, go ahead, experiment, and make your web design journey even more exciting. Happy designing!