Wix Parallax Effect

Wix Parallax Effect
One nice animation found on Wix websites is the parallax scrolling effect. It's not a true animation but it does add the illusion of movement, depth and dimension to your webpage.

This effect has been popular for several years and is a nice way to add a little interest to a website without adding an overpowering animation. Parallax scrolling is created when you tell the browser to scroll the background image at a slower rate than the other elements on the page. As you would expect, the scrolling effect is great for those long, one-page websites.

This technique is created with JavaScript, CSS and div elements. Just a note to keep in mind is that most mobile devices have a problem with fixed background CSS. So, Wix turns off the effect for mobile devices.

But when creating your Wix website, there's no coding involved. It's as easy as selecting the Parallax option for a background image or strip image. It can also be added to a strip video.

Without the parallax scrolling applied, the background image for the webpage will move in unison with the other elements on the page as the viewer scrolls over the page.

However, when we apply the Parallax scroll effect to the background image, the background image scrolls slowly as the viewer scrolls over the page. The dimension occurs as the other elements on the page scroll faster than the background image.

The third option, the Freeze option, for the background image Scroll Effects options is to lock the background image in place as the rest of the page elements scroll upward or downward.

Add Parallax to Background Image

  1. Click the Background icon in the left side menu.

  2. Add your background image as usual.

  3. Click the Settings button to open the Image Settings.

  4. Choose one of three option for the Scroll Effects.

    • None - the background will move at the same rate as the other elements on the page.

    • Parallax - the background will move slower than the other elements on the page.

    • Freeze - the background will remain in place but the other elements will scroll.



Add Parallax to Strip Image or Video

  1. Select the strip and choose Change Strip Background from the pop up menu.

  2. Add background image or video as usual.

  3. Click the Settings button to open the Image Settings.

  4. Next, choose Parallax from the Scroll Effects.





RSS
Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map








Content copyright © 2023 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.