We recommend:

 Get Started Today, It's Easy!

Parallax Scrolling Animator. Now Code-Free

It’s test time! Today, our dear readers, we take a closer look at one of the most long-awaited features of Webydo – a code-free Parallax Scrolling Animator. So please take your seats and enter the Webydo control panel so we can begin 🙂 .

For the record, Parallax scrolling is an effect where design elements move at different speeds whilst a visitor scrolls down the page. This effect produces a sense of movement, excitement and depth to your visitors.  It’s an excellent way to engage viewers through visual storytelling. Note: Since the parallax animation movement is enabled by the browser’s scrollbar, it starts only when you start scrolling down the site.

In the Webydo studio you can set amazing parallax animation effects on any kind of elements, including images, shapes, text, galleries, forms, animated gifs and even widgets. So lets try to animate some cupcakes on my test Webydo website.

  • Insert a new image element and upload an image.

Webydo - Insert an Image

  • Right-click on the image and choose ‘Add parallax animation’.

Webydo - Add Parallax Animation

  • The image surrounded by a black box shows the starting position of the animation, while the turquoise box shows the target position of the motion path. You can easily place these boxes wherever you’d like on the canvas.

Webydo - the Black and the Turquiose boxes

  • Pay attention to the black line above – it represents the animation starting line. You can change the position of the animation starting line by dragging it to an exact position on the page.
  • On the right Properties panel you can set the target position with pixel accuracy. You can also determine the speed of the motion path. Besides, you can add an effect to enrich your animation. This effect will occur when the element moves on its path.

Webydo - Parallax Scrolling Effects

  • You can add more motion paths to the element combining multiple effects.

Here’s what I managed to create (in real life it works smoother 🙂 ):

Parallax TestOne of the obvious drawbacks of parallax is mobile compatibility. Luckily, there are solutions to this issue. Webydo simply keeps your animated images pinned on your site’s mobile look – see screenshot.

Mobile Test

Have you already tried the new Animator? Share your experience with us in the comments!