Parallax headers have become very common in iOS apps. They're a great way to (for example) show off large graphical content, or summarize/focus a screenful of content.

Today we'll look at a fantastic library from Maxime Epain called MXParallaxHeader. Let's go:

A parallax header essentially involves displaying a view above a scroll view, which grows and shrinks as the user scrolls the scroll view.

It's also common to see the content of the parallax header view re-center itself as the user scrolls, so the content is visible for as long as possible while scrolling up.

MXParallaxHeader offers a few different options that make customizing this behavior quite simple.
We can center, fill, or lock our content to the top or bottom. Neat!

Let's use MXParallaxHeader to add a simple parallax header to a scroll view:

scrollView.parallaxHeader.view = headerView
scrollView.parallaxHeader.height = 150
scrollView.parallaxHeader.mode = .Fill
scrollView.parallaxHeader.minimumHeight = 20

Even cooler than that, MXParallaxHeader extends UIViewController to add a couple extra properties that allow us to easily add parallax header to any view controller.

Header views can optionally adopt the MXParallaxHeaderProtocol to implement custom parallax animations based on the user's scroll progress:

func parallaxHeaderDidScroll(parallaxHeader: MXParallaxHeader) {
  let angle = parallaxHeader.progress * CGFloat(M_PI) * 2
  self.falcon.transform = CGAffineTransformRotate(CGAffineTransformIdentity, angle)
}

More info about MXParallaxHeader can be found at git.io/mxparallaxheader