logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Natural Living
Folklore and Mythology
Baptist
Florida
Cosmetics
Distance Learning
Reading


dailyclick
All times in EST

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

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.

Join us in the Animation forum. | Join us in the Digital Art forum.

|

Add Wix+Parallax+Effect to Twitter Add Wix+Parallax+Effect to Facebook Add Wix+Parallax+Effect to MySpace Add Wix+Parallax+Effect to Del.icio.us Digg Wix+Parallax+Effect Add Wix+Parallax+Effect to Yahoo My Web Add Wix+Parallax+Effect to Google Bookmarks Add Wix+Parallax+Effect to Stumbleupon Add Wix+Parallax+Effect to Reddit



 



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


For FREE email updates, subscribe to the Flash and Animation Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2015 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.

g


g features
Subtle Animation Website Trends

Wix Editor - Background Video

Video on Wix Websites

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2016 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor