What is Parallax?

I did some Googling and also found some JS Libraries but still the basic meaning of parallax is not clear to me. Or rather I would say that I got confused.

In some tuts, the title is Parallax scrolling but it seems to me that its just a background image used in the div.

In parallax should not the text or other elements also move in addition with the background images as you scroll?

Thanks :slight_smile:

Hi @littlebirdy ,

A new trend in web designing has been introduced through Parallax scrolling. The application of such effects may look a bit more elaborate and complex at the first glance with the background moving at a slower speed rate than the foreground. However over clever application it creates a beautiful 3D effect on the web page while scrolling down. The speed of the effect can be increased or decreased according to the requirement through JS.

1 Like

It’s up to you, really. You can choose how each element on the page scrolls. Often, text etc. is left to its default scrolling, while images are made to scroll at different rates. But any element can receive parallax behavior.

Parallax basically means that some elements on the page scroll at different rates from others, creating the kind of 3D effect that @convergentinfoware mentioned.

2 Likes

wow Thank you.

For an idea of where the term parallax comes from and its meaning the real world:-

3 Likes

Try this…

Sit in a chair and close your right eye and concentrate on how things appear, including relationships between space and size and distance.

Then, open your right eye and close your left eye, and concentrate on how look.

Switch eyes and look again.

I believe this is an easy way to understand the term, and to help you see how having two eyes instead of one changes how you view the world! :wink:

Have a look at the Rimmel London site. A really good example of this technique. :grinning:
Rimmel London

Visually that page is good and shows clearly the parallax effect. However, I do see a number of accessibility issues with it :slight_smile:

Firstly the page doesn’t fit vertically in my browser window and the text is all overlapping and the main call to action button is missing.

If I try to scroll to see the missing information it goes straight to the next screen which is also overlapping.

If I scroll slowly with the middle mouse wheel button nothing at all happens and I thought scrolling had been disabled (some people do not have sufficient motor skills to scroll fast (e.g. those with MS or similar motor function illnesses)).

If I then scroll fast with the middle mouse wheel a whole lot of pages fly past :slight_smile:

Parallax effects can add interest to sites but they need to be done correctly without harming the usability of a site. In most cases I simply find them irritating to use unless its well thought out and well implemented.:wink:

2 Likes

In my experience, that’s a problem with most sites which use this approach.

This one is keyboard-navigable - after a fashion. Using page down or the spacebar does move it on a “screen” at a time, but as their screen size and mine don’t coincide, the screens become progressively more misaligned the further down I scroll.

Using the arrow keys does work, but scrolling the whole thing like that is likely to induce RSI.

Having worked my way down through several screens by a combination of Page Down and the arrow keys, I find something which interests me and I decide to follow the “Find Out More” link, so I hit Tab - and there I am, back at the top of the site, tabbing through the whole blasted thing to get back to the link I want.

And I thought I must be the only one who dislikes them, given how prevalent they seem to be.

(The sooner this fad dies out and people go back to building easily-navigable sites with proper pages, the better, IMHO.)

2 Likes

It can, in that case you move more into using it as simple animation.

A good example on this is: http://www.wolfsbane.eu/norse-myths-the-tale-of-fenrir-choose-version.php
Note. Chose the Parallax version to see the effect and not the mobile version.

Also keep in mind what @PaulOB says, when parallax is used without a concern for a fallback for devices that do not properly support it, then it will be very frustrating for the user trying to view the site on such a device. So if you decide to use it, try to have two versions and fallback if the device does not match the required specifications.

Wow useful caution points.

Yes I saw the website. The designer who designed the website really knows stuff but the problem with too much aesthetic websites are bad UX.

Anyway thank you to everybody.

Hello,

It’s a New Web Design current of the moment is parallax scrolling. Which presume the Background moving at a slower rate to the foreground, conduct the user experience To new interactive level of online viewing. we can create a 3D effect as you scroll down the page.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.