iOS Parallax Scrolling effect (like in Yahoo News Digest app)

Tharindu Madushanka picture Tharindu Madushanka · Jul 28, 2014 · Viewed 16.9k times · Source

I would like to know how to implement parallax scrolling similar to Yahoo News Digest app. In which when user scroll horizontally background image scrolls in a different speed with the paging is enabled.

May be they do it with a ScrollView with a background view. Not exactly sure. Hint to implement such scrolling would be great. I have checked similar questions but couldn't find the answer I was looking for.

Answer

Fogmeister picture Fogmeister · Jul 28, 2014

I've done this before with 2 scrollviews.

You have the main detail scroll view and then the parallax scroll view behind it (or wherever you want it).

Then you become the delegate of the detail scrollview.

In the method scrollView:didScroll you can then adjust the scroll of the parallax view.

If you're just doing the x axis then you want something like this...

CGFloat detailMaxOffset = self.detailScrollView.contentSize.width - CGRectGetWidth(self.scrollView.frame);

CGFloat percentage = self.detailScrollView.contentOffset.x / maxOffset;

CGFloat parallaxMaxOffset = self.parallaxScrollView.contentSize.width - CGRectGetWidth(self.parallaxScrollView.frame);

[self.parallaxScrollView setContentOffset:CGPointMake(percentage * parallaxOffset, 0);

This will set the scrollviews content offset "percentage" to be the same on each.

To get the parallax effect you just need to make the contentSize of each scrollview different.

If the parallax scroll view has a bigger content size than the detail scroll view it will scroll faster. If it has a smaller content size it will scroll slower.