How to Add a Parallax Scrolling Effect to Your Create Website

Find out how to create a parallax scrolling landing page- without coding.

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.

What is parallax scrolling?

Parallax scrolling is a captivating visual effect used in web design that creates an illusion of depth and immersion. It operates on a simple principle: as the user scrolls or moves through the content, the background images move at a different speed than the foreground images.

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.

If you are new to Create, welcome!

Create is an AI-powered app builder where you can make full React code apps—just by using natural language (English, Japanese, Spanish, Russian, or any language you speak!). You can learn more about how to get started with Create here.
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.

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.

Pexels is a great site to grab free photo and video assets. Not only can you download the assets, you can modify the photos and videos without any additional licensing.

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 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.

Here are the links to the images I uploaded for this project:
- Sky image:
- Cloud image cutout:

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.

  1. 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 ( Join for tips, tricks, and access to features ahead of launch. | 757 members