January 24, 201511 yr Hi I am trying to leanr to do parallax scrolling, i did this tutorial that worked for vertical parallax - <!doctype html> <html> <head> <meta charset="utf-8"> <style type="text/css"> body { margin:0px; background:url("BlueOrca/Images/background.jpg") fixed; } #content_layer { position: absolute; } #prlx_lyr_1 { position: fixed; background: url("BlueOrca/Images/logo2.png") no-repeat 0px 200px; width: 100%; height: 800px; } </style> <script> function parallax(){ var prlx_lyr_1 = document.getElementById('prlx_lyr_1'); prlx_lyr_1.style.top = -(window.pageYOffset / 4)+'px'; } window.addEventListener("scroll", parallax, false); </script> <title>Untitled Document</title> </head> <body> <div id="prlx_lyr_1"></div> <div id="content_layer"><script> for(var i=1; i < 50; i++){ document.write('<h1>This is dummy line '+i+'</h1>'); } </script></div> </body> </html> But i am wanting to do horizontal parallax, i thought if i change the pageYOffset to pageXOffset, thats all that would be needed but apparently not, I dont know javascript very well but i thought thats all that was needed, can someone help? Thanks
January 24, 201511 yr Any tutorial where I see the code document.write being used immediately tells me it's not worth reading. Document.write should never, ever be used and is a really dangerous piece of code. Also adjusting the top property of an element is pretty inefficient, you should be using translate3d. I recommend you use a library like Scrollr if you are not very familiar with JavaScript. But on the whole if you want great looking efficient parallax you're gonna have to learn JavaScript. translate3d gives you sub-pixel rendering, and it's painted using the GPU rather than the CPU, also it's forced onto a new layer so only it gets repainted on each frame. when you adjust the top it forces a full DOM repaint for each frame, and this will cause it to often skip frames. There's plenty of good tutorials on parallax but they all require a pretty solid base in JavaScript, Dom manipulation and browser methods such as requestAnimationFrame() In this exact case you have above, just adjust the left or right property rather than the top. But it will look choppy because of the aforementioned reasons. Edited January 24, 201511 yr by rbrtsmith
January 24, 201511 yr Author oh wow, i didn't realise that, to be honest its just for a college project so its not a huge deal, and it seems to be running quite nicely, I do intend to sit down and learn java this summer, but right now college is taking up all my time changing that property worked for me though, so for the time being it will have to do. Really appreciate it!
January 24, 201511 yr Glad it worked, Just a thing to note: Java and JavaScript are two completely independent languages. JavaScript is not a subset of Java or anything like that, the only similarity is some of the syntax, other than that they are a world apart Edited January 24, 201511 yr by rbrtsmith
Create an account or sign in to comment