Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Parallax view scrolling (Yahoo weather like)

This is not strictly a programming question but more "how to accomplish this" question.

I am curious (and working on an app that will probably require this) how is left-right parallax scrolling implemented. To know exactly what I mean check the Yahoo Weather app (it's free - no worries there).

Are they using just one view controller or a separate controller for each view that is shown there?
What is the easiest way to implement this? I have found this topic here which kinda explains it a bit but when are they getting information from their servers? Is it when the views are changed or at the startup of the app?

Any information how to implement such scrolling would be much appreciated.

like image 384
Majster Avatar asked Jul 31 '13 19:07

Majster


People also ask

How does parallax scrolling work?

Parallax Scrolling works with the so-called movement parallax. When an observer moves parallel to two objects, the objects appear to move at different speeds. The closer object seems to move faster, the farther away object seems to move slower.

What is mobile parallax?

Parallax scrolling allows your background to move slower than the foreground. This creates the illusion of depth and movement on the website for the visitors. If you check it on mobile devices, you'll notice that your parallax sections don't work but show static images instead.

What is parallax banner?

Parallax is a beautiful, immersive display format designed for mobile web. It leverages a layered, parallax animation effect to capture attention in an interesting and non-intrusive way. The format creates a unique perception that different image layers of the ad have different depths.


1 Answers

It's really simple actually:

  • Subclass UIScrollView
  • Add a UIView *parallaxView; as @property
  • Add a CGFloat parallaxFactor as @property
  • Override layoutSubviews
  • Call super, and then use self.scrollOffset*parallaxFactor to position the parallaxView

That's it!

I've made a multifunctional UIScrollView subclass myself that's really simple to use, perfect for this case! Get it on GitHub: https://github.com/LeonardPauli/LPParallaxScrollView

Good Luck!

like image 121
Leonard Pauli Avatar answered Sep 25 '22 06:09

Leonard Pauli