I am making a website with a parallax header. This header needs to contain both images and video. I wanted to make a pure css approach, however that creates new "problems".
I tried http://keithclark.co.uk/articles/pure-css-parallax-websites/
Problems CSS: - You have to put the whole page in a scrollable div with a 100% viewport height, this means that native ipad scrolling behaviour is not working anymore, things like js scrollTop are not working anymore, fixed navbars are displayed over the scrollbars and so on. See demo of this here http://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/
Problems JS: - Performance, animation looks jumpy most of the time - Needs a lot more code - Needs extra code to make video behave like a fixed background
I really do not want to use any third-party plugins, to prevent a "plugin overkill" for this website.
I am now at a point where I have to choose to go on and keep the CSS version or to go with javascript. What I am just curious about, is what is the best way coding wise, performance wise, to make a parallax? Hope someone can enlighten me on this.
Thanks!