Responsive Javascript

Tonight I had a go at something I've had issues with  - the horizontal scrolling and parallax aspects of  scrollmagic I've been using not working on mobile, because the different screen dimensions and screen.

first I made an updated version of that panel, more like the actual length I want it to be. This will make it quite a big image, and I experimented with splitting it in two and floating them but sometimes on mobile it still stacked them....

I updated this prototype page with my developments.

I fiddled around a lot with using viewport height and percentages for my sizes, but found the main issue is actually in the javascript, the amount of duration and movement. So I had a look at how to have different javascript for different screen sizes, like I do in the css. I found this, which is fairly straightforward!

if ( $(window).width() > 739) { //Add your javascript for large screens here } else { //Add your javascript for small screens here }

Then it was just a case of  adjusting the amounts until it worked properly.

Then I tested it on my flatmate's phone, as well as my own. It's a little jerky, but works otherwise!

Not so great on my ipad - but it is very old and laggy anyway. I think also the large image file might have something to do with that, I'll have to make sure I can get that smaller.