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/
- 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/
- 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.