How to Add a Parallax Scrolling Effect to Your Create Website

Find out how to create a parallax scrolling landing page just like the one below, all without coding.

Yesterday, I shared on Twitter how I put together this "clouds in the sky" parallax scrolling landing page in English using Create.

Today, I'm going to dive into a little more detail about how you can make your own parallax scrolling landing page- no coding experience required.

Create - free-to-use AI app builder

Create lets you code using plain text and images. Use it to build components, sites, designs, prototypes, products, tools and more.

Create - free-to-use AI app builder

How to Create Parallax Scrolling in Create

1. Gather your assets

I started off by gathering the image assets I wanted to use for my project. I chose 2 images- one of a plain blue sky and one of a cloud I decided to cut out and use for the foreground of the page.

2. Crop & edit your images

I brought both images into Photoshop to crop them to the same size and remove the background of the cloud image I wanted to use in the foreground of the page.

If you don't have access to Photoshop, there are many free tools that will allow you do the same thing! Check out Adobe Express or remove.bg. You can even use the iPhone click and hold feature to isolate part of your image and remove the background.

3. Upload the images

I uploaded the images to Postimages to generate URLs that I could use in my prompt.

If you want to upload your images straight into Create, that's a option too! However, when layering images I find it easier to link images within the prompt vs keeping track of all my images visually.

4. Write your project spec in Create

You can take a look at the prompt for this project and copy it yourself here.

There are 2 key pieces to this prompt that make the parallax scrolling effect possible:

1. Creating the layered stack

"Create a stack with a background image at the bottom, then text, then the front image. Make sure text is behind the front image."

By setting up this layering system, you can make sure that the different pieces of your page overlap properly.

2. Creating a parallax scroll

Make sure you can scroll down the page. As you scroll, create a parallax feeling by each element moving at a different speed. Front image should move slowest, then text, then background image.

Stagger your scroll so each element moves differently. This can be customized for your page/project.

5. Optimize your prompt and share your complete project

Play with the final version here!

Explore parallax scrolling pages built with Create

Make your own and share what you create with us on Discord or Twitter!

Join the Create Discord Server!

Create’s official community (https://www.create.xyz) Join for tips, tricks, and access to features ahead of launch. | 757 members

Discord