Parallax - Can I add more than 4 layers?

Question

here's my code for parallax scrolling. See http://violetoeuvre.com/Exp_4.html.

Whenever I add more than 4 layers, the page won't load. Is this just a bandwidth problem? I know I've seen websites with more than four layers...

Should I use a different code?

<script type="text/javascript">
var wf_pbb_object = [
{bc:"rgba(0, 0, 0, 0)"},
{img:"images/Exp_4/bluediamond.png", mm:false, ms:true, mms:1, mss:30, mmd:1, mso:"v", msd:1, im:"image", pr:"both", mma:"both", ofs:{x:0, y:0}, zi:4, sr:false, sb:false, isr:false, isb:false},
{img:"images/Exp_4/bluestripe.png", mm:false, ms:true, mms:1, mss:40, mmd:1, mso:"v", msd:-1, im:"image", pr:"both", mma:"both", ofs:{x:0, y:0}, zi:1, sr:false, sb:false, isr:false, isb:false},
{img:"images/Exp_4/greenlock.png", mm:false, ms:true, mms:1, mss:50, mmd:1, mso:"v", msd:1, im:"image", pr:"both", mma:"both", ofs:{x:0, y:0}, zi:2, sr:false, sb:false, isr:false, isb:false},
{img:"images/Exp_4/silversq.png", mm:false, ms:true, mms:1, mss:60, mmd:1, mso:"v", msd:1, im:"image", pr:"both", mma:"both", ofs:{x:0, y:0}, zi:2, sr:false, sb:false, isr:false, isb:false}
];
</script>

Thanks in advance!

why is the back moving faster than the front in this example? shouldn't parallax scrolling be the other way around? — Christoph, Mar 06 '13 at 16:15
The parallax has the effect I want and I like that it's reversed. I don't think that has anything to do with adding layers......... — Claire, Mar 06 '13 at 16:23
@SoonDead I can't confirm that. It's working for me ff19/ch25. — Christoph, Mar 06 '13 at 16:50
Any suggestions about an improved code that would let me add more layers? Thanks! — Claire, Mar 06 '13 at 16:51

score 0 · Answer 1 · answered Mar 06 '13 at 23:35

The re-paints on scrolling are taking 0.5s+, now to get smooth animation you should be aiming for 60fps!

I suspect part of the problem might be the size of the images but I've not looked in more depth that that.

If you use Chrome developer tools, go to timeline, turn on recording, scroll the page and you'll see the length of time the paints are taking.

Parallax - Can I add more than 4 layers?

1 Answers1