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

Question

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.

Isostasy

Possible duplicate: #17980049 – Emilia

Yahoo Whether app has different scrolling effect actually. – Isostasy

Answer 1

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.

Gooseneck

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. – Isostasy

Replace x with y and width with height. That's pretty much it. – Gooseneck

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. – Isostasy

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 – Coaler

@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. – Gooseneck

i can't move the buttons . they are meant to be static as 'Airbnb' app does that on Hotel Listing Screen. – Coaler

@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? – Gooseneck

Answer 2

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

Pali

Answer 3

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;
}

Hyperbolic

Answer 4

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)

}

Dys