Wix Designer Demo: 3D Parallax Scrolling

Here is a Wix website design that we're working on for a video game company showing how you can use Wix strips and backgrounds to create layered parallax scrolling that has a 3D look as users scroll downward.

This effect is created by using layered Strips in Wix – we use transparent strips (set background color to 0% for full transparency) combined with transparent PNG files used for the strip background. Then, you can layer these strips over top of each other to create a 3D feel to your backgrounds.

In this case, we have the main background set to Freeze and then use a Strip with a transparent rock PNG file on top with no scroll effect, then use a parallax scroll for the ships PNG in a second lower transparent Strip, which is staggered down about 150 pixels to give it depth. We may add a fourth layer to this to give it even more depth. We also used transparent PNG black blends to "blend" the images seamlessly together as you scroll down.

Of course, you do need to also create the right size/dimensions of PNG files to work well in the concept. We used Photoshop to do this, creating transparent backgrounds on the artwork. This isn't always a quick process, in this case, we created several versions of the images until we were able to get them to do what we wanted. For example, we made 6 different ship PNGs until we had one that was the right size and dimensions to flow and be placed the way we wanted. So while this 3d parallax effect isn't always a super fast one to create, it's worth it if you stick with it and keep modifying the images and strip sizes to get it to perform in a way that looks like a 3D background.

Need a beautiful custom website designed in Wix? We are expert Wix Designers and provide free Wix Web Design Estimates, contact us today »