15

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.

Tharindu Madushanka
  • 3,241
  • 7
  • 31
  • 33

4 Answers4

21

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.

Fogmeister
  • 76,236
  • 42
  • 207
  • 306
  • btw this works fine with parallax effect on horizontal scroll. They also do a zoom on vertical scroll. Would you mind any hint on that too. Already accepted the answer. – Tharindu Madushanka Jul 29 '14 at 02:39
  • Replace x with y and width with height. That's pretty much it. – Fogmeister Jul 29 '14 at 07:11
  • 1
    actually i've completed vertical scaling by using negative contentOffset.y and setting frame of top scrollview/imageview to gap plus image height to scale on vertical negative scrolling. – Tharindu Madushanka Jul 30 '14 at 06:17
  • in my case i have buttons on parallax scroll view . How can i know that button has been clicked as here the parallaxScrollView is behind so it wont take user event – Babul Prabhakar Jun 24 '15 at 12:10
  • 2
    @BabulPrabhakar you could put the scrollview in front. Or you could override the hitTest:withEvent: method on the front view. Or disable touches on the front view. Or move the buttons without parallax effect. – Fogmeister Jun 24 '15 at 12:55
  • i can't move the buttons . they are meant to be static as 'Airbnb' app does that on Hotel Listing Screen. – Babul Prabhakar Jun 24 '15 at 13:09
  • @BabulPrabhakar ok. Not sure what you mean. If the buttons are on the scrollview then they will move. Do you have a question open for it? – Fogmeister Jun 24 '15 at 13:21
11

Here is the answer. I subclass it from uitableview so that data can be reusable and wrap it in a uiview. https://github.com/michaelhenry/MHYahooParallaxView

Thanks, Kel

Michael Henry
  • 644
  • 9
  • 12
0

100% working and dam easy

Take a view on imageview exactly size of image view. by default alpha for view set 0.

//MARK: Scroll View Delegate methods
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{

  NSLog(@"X: %f Y: %f",scrollView.contentOffset.x,scrollView.contentOffset.y);

CGFloat scrollY = _mainScrollView.contentOffset.y;
CGFloat height = _alphaView.frame.size.height;

CGFloat alphaMonitor = scrollY/height;

_alphaView.alpha = alphaMonitor;
}
Mr.Javed Multani
  • 12,549
  • 4
  • 53
  • 52
0

Swift 3

Here's how I got a parallax effect to work in Swift 3 for a vertical scroll in a tvOS app.

In ViewDidLoad():

    parallaxScrollView.delegate = self
    detailScrollView.delegate = self

And following: 

override func viewDidLayoutSubviews() {
        self.detailScrollView!.contentSize = CGSize(width: 1920, height: 2700)
        self.parallaxScrollView?.contentSize = CGSize(width: 1920, height: 3000)
    }


//// THE SCROLL VIEW

func scrollViewDidScroll(_ scrollView: UIScrollView) {

    // Parallax effect
    let detailMaxOffset = self.detailScrollView.contentSize.height - self.detailScrollView.frame.height;
    let percentage = self.detailScrollView.contentOffset.y / detailMaxOffset
    let parallaxMaxOffset = self.parallaxScrollView.contentSize.height - self.parallaxScrollView.frame.height;
    let parallaxOffset = CGPoint(x:0,y:(percentage * parallaxMaxOffset))
    self.parallaxScrollView.setContentOffset((parallaxOffset), animated: false)

}
Peter Wiley
  • 820
  • 7
  • 19