Parallax scroll

[increeddeveloper]

How was the website flatvsrealism constructed?

I want to know a) how to make it responsive b) How was horizontal motion scroll achieved?

I know they have used skrollr.js but then I wish to know the html css and javascript logic to make the site get the parallax effect.

Please guide !

Edit: Here is the link to the site:
http://www.flatvsrealism.com

[Shikkediel]

I suspect this question is too broad to get an answer. And although it’s interesting, most users will have clicked away before the huge page load has finished. That was my first instinct at least (if not for the unsolicited audio).

[increeddeveloper]

I am more interested in knowing how to make the parallax scroll “responsive”.

I agree to the fact that the site has heavy graphics and audio. But that apart, I am more interested in knowing the way it was implemented. I need to build a website on similar lines too.

So, any help is appreciated. Please guide me on the same.

[increeddeveloper]

Oh ok. ScrollMagic. That sounds like some other plugin apart from skrollr. So, now I want to ask if there is any javascripting actually needed or the parallax effects in the flatvsrealism website can be done using HTML and CSS only.

And yes, by responsive, I meant website being responsive to devices of different widths. Well, the flatvsrealism website is responsive and does open on mobile phones too !

[increeddeveloper]

Got this link for making the site responsive. That’s using skrollr.js.
https://ihatetomatoes.net/make-parallax-website-responsive/
Will give this link a try.

I actually want to try using only html and css and avoid any kind of complex javascripting cause I dunt know javascript.

And yea, flatvsrealism used skrollr.js but that apart they also have done some awesome javascripting.

[Author]

Posts