Want to add personality and depth to your website?
Then you might want to consider parallax animations.
Although they were first used in video games, these cool effects have recently become a trend in web design. They’re perfect to grab your site visitor’s attention. Plus, they make your pages look more interesting and professional.
Some of the benefits of adding parallax animations are as follows:
- Increases user engagement and page visits
- Highlights important content or featured products
- Directs site visitors to your call-to-action
- Uses a story-telling approach to promote your business
Breakdance has pre-built blocks that allow you to add parallax animations to your site. Adding them to your page is surprisingly easy to pull off - you don’t need to be tech-savvy.
In this tutorial, I’m going to show you how to create parallax scrolling in Breakdance.
So, let’s get started with the basics, shall we?
What is Parallax Animation?
Parallax scrolling is a popular technique in web design that uses an optical illusion to create a 3D effect. And since they’re very common on websites these days, you’ve probably encountered one.
Designers add parallax animation by setting the background elements at a slower pace than those in the foreground. So when a user scrolls, these subtle movements add a dynamic, layered feel to the page.
In the next section, I’ll guide you through creating simple pages that showcase different parallax animations.
Creating Parallax Animations in Breakdance
1) Scale Images On Scroll
Changing the element size on scroll creates an illusion of objects moving. This effect also tells the user which element to focus on.
Here’s how to do it on Breakdance:
a) Prepare your images. Here, I’ve created two images - one that contains the sky background and the other containing a mountain with a transparent background.
b) Open a Breakdance page template and add your images.
c) When you add the images to the page, you might notice the gap between them.
To fix this, set the position of the foreground image (in this case, the mountain image) to absolute. The reason for this is we want the image to have a position relative to its container (which is the section). This makes it easier to overlay the mountain image to the background image.
d) Choose the first image (sky background, in my case). Then, go to the ‘Settings’ tab and click ‘Scrolling Animations.’ Toggle the ‘Enable’ option and choose ‘Scale.’
On the settings window, you’ll need to set the start, middle, and end values.
For this example, I've opted for the image to decrease in size while scrolling. The start value is 1.2; the Bottom trigger is 11 and Top is 80. I didn’t add values for the ‘middle’ and ‘end.’
I found these values to be optimal, but feel free to tweak them as you see fit. I've also integrated a blur effect to shift focus as users scroll.
Tip: To place the image in order, make sure to set their z-index values.
z-index is a CSS property that controls the stacking order of overlapping elements on a page. The image with the highest z-index (in our case, the mountain image) will appear in front of the other elements with the lower z-indices.
e) Add other elements as you wish. Here, I’ve added a header and button at the top of the section.
d) Here’s the final look of our page.
2) Use Vertical Scroll Effect
Vertical scroll is one of the class parallax scrolling that makes elements move up or down at different speeds.
In this tutorial, I’ve prepared a few images with transparent backgrounds. The reason is I want these images to overlap and simulate a floating effect during the scroll.
So, let’s do that!
a) Open a blank page in Breakdance. Add a few elements like the headings, images, and icons. Modify the background color for each section and adjust the layout to your liking.
b) For the images that you want to overlap, make sure that they’re set in absolute position.
Then, manage the stacking order of the overlapping elements by assigning the appropriate z-index values for each.
c) Experiment with different animations to apply to each element.
In this tutorial, I’ve added an entrance animation for a smoother transition of the first section elements.
For the headings, I’ve used a ‘Slide Down’ animation effect. Then, I adjusted the duration and delay values.
For the images, I’ve used a ‘Slide Up’ animation and set the duration to 1000 ms.
You might want to achieve different effects on your project. So make sure to experiment with the duration and delay values. Keep in mind that the speed of your transitions can be used to convey different moods. For example, gentle and slow animations represent calmness, while fast transitions bring excitement.
d) In the next section, add the vertical scrolling animations for the overlapping images and the heading.
For the leaves image, the ‘Start’ and ‘End’ values are set at -500 px and 500 px. This makes the leaves move downward as you scroll. Conversely, the apple image has ‘Start’ and ‘End’ values of 300 px and -300 px, causing it to move in the opposite direction.
Again, you can experiment with these values depending on what effects you want to achieve.
For the heading, I used the ‘Opacity’ effect. Here, I’ve set the start and end values to zero, and the middle value to one. This makes the text more focused at the scroll’s midpoint but then fades subtly as we scroll up or down. This ensures the viewer's focus transitions smoothly to the next section.
Tip: In Breakdance, the image is, by default, relative to the image itself. When you apply a vertical scrolling effect, this might create strange behaviors (for instance, the animation stops midway as you scroll, or the image is not vertically aligned in the middle when you scroll).
To fix this, we want the image’s position to be relative to its parent container (in our example, the first column).
Click the wrapper or container element of the image. Go to Settings > Advanced. Enter an ID name in the appropriate field. Copy the ID to your clipboard.
Select one of the overlapping images. On the same settings tab, click Animations > Scrolling Animation > Advanced.
Under the ‘Relative To’ section, click ‘Custom.’ Then, paste or enter the ID name of your section on the ‘Custom Selector’ field.
Do the same for the other overlapping images.
e) Save your settings. Preview your page on the front-end.
3) Use Horizontal Scroll Effect
Similar to the vertical scroll, the horizontal scroll makes the elements move across the page at different speeds as we scroll. But this time, they move from left to right (or vice versa).
Follow these steps to add the horizontal scroll effect to your elements.
a) Start by adding a section, heading, and any images you wish to animate on your Breakdance page.
In this example, we’re going to create a simple home page for a luxury watch store. I added three sections, headings, and three watch images.
b) To add a horizontal scrolling animation, go to Settings > Animations > Scrolling Animation. Toggle the ‘Enable’ option and choose ‘Horizontal Position.’
On the settings window, you can enter values for the start, middle, and end. You can also set the trigger position to apply the effects to your images. For example, in the first image, I’ve used the following values.
I’ve also added the ‘Opacity’ effect to change the focus of the image. The start and end values are set to zero and the middle to one. This means that the image begins and ends with diminished opacity, becoming fully visible at the scroll's midpoint.
I’ve also added the ‘Rotation’ effect for a touch of flair. Starting with a -90° angle, the rotation normalizes to 0° by the midpoint and remains so till the end.
Both effects have been applied across the three images. For varied rotation triggers, I've adjusted each image's initial value to achieve a sense of spontaneity.
For the headings, I’ve added the ‘Blur’ effect to ensure smooth transitions and shifts in focus during scrolls.
As always, don't hesitate to play around with these values to achieve your desired effects.
c) Here’s the final look of the page we’ve just created.
That’s a Wrap!
Parallax scrolling in Breakdance can make your site engaging and memorable. When done right, it allows you to present your content in a more creative and dynamic way.
But be careful not to overdo it. Too much movement can be dizzying and cause annoyance to some users. When adding animations, make sure to add them with a purpose.
Hopefully, this tutorial will help you create beautiful landing pages. If you want to explore Breakdance’s libraries, make sure to read these articles:
- Elements Hive In Breakdance Builder – Some Examples
- How to Use Windmill BDD Library in Breakdance
- Destiny Elements Breakdance Builder Review: Build Faster
You can share your valuable feedback and suggestions through our comment section below. We’d be happy to hear about your Breakdance experience!