Create Parallax Animation / Parallax Scrolling with Accelerometer

Parallax scrolling was a major trend a few years ago in web design and it is still really useful to bring dynamism to your presentations, landing pages, games or mobile apps. It is a technique where background images move more slowly than foreground images.

In this video you'll learn how to:

• create many scrolling areas and configure them together
• synchronize components together
• use accelerometer with Motion Sensor

Duration: 6:38 minutes

[TRANSCRIPT]

Hello,

Parallax scrolling was a major trend a few years ago in web design and it is still really useful to bring dynamism to your presentations, landing pages, games or mobile apps.

It is a technique where background images move more slowly than foreground images

In this video, let’s see how to create a Parallax animation in just a few clicks and without any coding.

To create a Parallax effect in PandaSuite, you need to synchronize together at least 2 scrolling area components. One for the background images and one for the foreground. You can create Parallax scrolling that is horizontal or vertical.

Let’s focus how to build this bike animation. At the end of the video I’m gonna show you how to use the accelerometer for this effect so that it’s scrolling while tilting an iOS or Android mobile device.

Let’s start by defining a background color for the blue sky.

Let’s add a first scrolling area and make it full screen using the Stretch options in the properties.

Rename it: background.

Click on the arrow to enter inside and edit its content. Let’s insert the image of the building. Adjust the height to make it full screen. This image is wider than the screen width.

Let’s adjust the scrolling area width to display the full width.

Unselect the image to select the scrolling area component.

In the Properties window, click on Horizontal and for the width, click on the Adjust button. The width is automatically calculated according to its content, which means according to the width of the background image. The width of the scrolling is now 2788px.

Also keep user scrolling but hide scrollbar and remove bounce effect.

You can view the scrolling building from the studio and from the preview.

Now let’s add the clouds.

Exit the first scrolling area and go back to the Screen level.

Now let’s add another scrolling area and position it at the top of the screen. Stretch it to the width of the screen but no need to make it in full screen : the clouds will only be displayed above the buildings.

Rename it.

In the properties, let’s keep the same properties as the other component. Be careful at the width: the 2 scrolling areas must have different sizes, this is what will define the Parallax effect. The widest area is the one that will scroll the fastest.

I choose a smaller width than 2788px so that the clouds move slowly than the building.

Let's add the cloud images inside, put more than one to get a continuous effect and use the scroll bar to move inside the area.

When previewing the animation, we can see the scrolling areas are independent and clouds are placed above the buildings. This is because they were created after. Let’s position them behind the building by putting them below the building in the list of objects.

Now clouds are behind buildings but we cannot make them scroll as the other scrolling area is taking the control.

We need to synchronize them together. Synchronization is a global concept in PandaSuite Studio: you can synchronize all components together and choose the properties you want to synchronize: position, time, orientation. Here we’re gonna synchronize the position of the scrolling areas together.

Add a Synchronization component and in the properties, add the two scrolling areas. Make sure properties are correctly set.

Now the Parallax effect is here.

To enhance this effect, let’s insert a bike that will remain static. Just add the image in the screen, no need to place it inside a scrolling area.

You can add any other elements to this effect. Let’s add birds that are moving from up to down. Create another scrolling area which is vertical, place the birds inside and add it to the existing synchronization group.

If you are building for iOS or Android device, you might want to use the accelerometer to control this animation. While tilting the device, the animation will scroll accordingly.

For that you just need to add a Motion sensor. This sensor detects motion and orientation of the mobile devices. You can build any animations related to a device’s movement.

In the properties, choose Tilt, activate Accelerometer if you, keep only the horizontal axis and the default amplitude of the movement.

Then add it to the Synchronization group.

That’s it! You’re now a Pro of Parallax effect and ready to impress your users.

If you liked it, just click on the like button and subscribe to our YouTube channel!