Skip to main content
All CollectionsFrequently Asked Question
How to add Parallax Scrolling effect?
How to add Parallax Scrolling effect?
Updated over 8 months ago

Parallax is a dynamic and interactive design technique where background images move at a different speed than foreground images, creating a sensation of depth and immersion. It's a real crowd-pleaser on websites because it just adds that extra touch of awesomeness, you know! 🕺🌟

Here is a demo of parallax effect by W3Schools.

I'll guide you through the steps to create a parallax effect on your CodeDesign projects. Here we are going to apply parallax effect by changing the 'Attachment' property of the hero image, that is the photo of those delicious muffins!

Creating Parallax Effect on your CodeDesign Page

  1. Start by clicking on the "hero section," which is like the big, eye-catching picture at the top of your page.

  2. Then, select the background image and head over to its properties on the right sidebar.

  3. Click on "Attachment" and change it to "fixed"

  4. Finally, hit "Preview" to see your changes in action and you'll see get something like this!

    ARC Look LARGE - PARALLAX.mp4 [video-to-gif output image]

Video Guide - Creating Parallax Effects on CodeDesign

Here's a short video that walks you through the steps to add parallax scrolling effect. If you have any questions, please don't hesitate to reach out to our support team. You can do so by simply clicking on the messaging option at the bottom right of the screen. We are here to help!

Did this answer your question?