Parallax experiment result

[siran]

Just in case somebody is still interested in parallax scrolling.

I have been playing around with this stuff for quite a while and will stop it for some time now. So I thought to share the result...
I ended with three different technical approaches. (All based on the same javascript codebase)
In short the result is:
- All experiments ended with poor results in IE9. (IE11 OK, IE10 untested)
- All experiments ended with good results in current versions of FireFox, Chrome and Opera (on Windows).
- Current results are poor on (probably all?) mobile devices. Already have an idea for the next step though.

You can have a look at the results here or download the design file.

[siran]

Made a small correction. Height of the viewport was read incorrectly on IE.
Also noticed that on a slow PC the absolute positioning is jerky on IE.

[siran]

I accidentally came across this website: Get element position using javascript
And noticed that it provides a possibility to read the current scroll position more accurately on android devices. (Don't have an apple device to test on...)
So I created a new version of my parallax test.
Although parallax seems to be out of fashion, it still is interesting to experiment with. And maybe the mentioned web address might be of interest to someone else here.
The new fixed position version seems to run much smoother on the android device and except for IE9 very smooth on windows browsers. (In fact the remaining problems seem to be caused by lower performance.)
I have updated the online example and placed the old version here for comparison.

If someone has an apple device available for testing, please let me know how it performs.

[gwpriester]

I don't think parallax is out of fashion, it has just been overused, and mostly not used well. The challenge is to find a new way to use it but also to use the effect so that it is not disruptive and distracting.

[siran]

Forgot to mention that there was another interesting article on problems with scrolling effects on Mozilla developer network.

[siran]

So Gary, I hope you forgive my bad examples. They are of a pure technical nature.
How have you been able to respond that fast?

[gwpriester]

I must have just checked in after you posted.

The middle button example seems very smooth.

[siran]

Thank you for the information Gary. On which platform did you check?

[gwpriester]

Windows 10 Firefox.