Search code examples
javascriptcsshtmlparallax

Creating a Parallax Landscape (Scene), Different to other Parallaxes


First of all, I know there are ALOT of parallax questions out there, but they all use a different effect to what I am aiming for.

I want to create a parallax scene like used here: http://www.firewatchgame.com/ I thought it would be easy to make different images scroll at different rates, apparently I was wrong. I would like to recreate something like that scene using images of my own with transparent backgrounds. It's hard to explain the difference, but I am aiming for the example above, not something like this: http://cdn.tutsplus.com/net/uploads/legacy/2138_SimpleParallax/Demo/index.html (Don't get me wrong, it's a nice effect, but not what I want)

Any ideas or variations of other codes to give the desired effect? Thanks

PS. If there are any pages that do give the same effect as desired, could a link be provided?


Solution

  • Dorvalla found what I was looking for:

    codepen.io/samdbeckham/pen/OPXPNp There is a codepen about this. It's litterly just layers of pictures. What happens is that there is a tat of transformation going on when scrollling. Also, check this medium.com/@hamstu/… for tutorial – Dorvalla

    The medium.com website creates the exact effect I am looking for. Even relates to the Firewatch example as well.