ios - Parallax effect with UIScrollView subviews

Question

I'm trying to create a Parallax effect on a UIView inside a UIScrollView. The effect seems to work, but not so well.

1. First i add two UIView sub-views to a UIScrollView and set the UIScrollViews contentSize.
2. The Views sum up and create a contentSize of {320, 1000}.

3. Then I implemented the following in scrollViewDidScroll:

   - (void)scrollViewDidScroll:(UIScrollView *)scrollView
   {
       CGFloat offsetY = scrollView.contentOffset.y;
   
       CGFloat percentage = offsetY / scrollView.contentSize.height;
   
       NSLog(@"percent = %f", percentage);
   
       if (offsetY < 0) {
   
           firstView.center = CGPointMake(firstView.center.x, firstView.center.y - percentage * 10);
   
       } else if (offsetY > 0){
   
           firstView.center = CGPointMake(firstView.center.x, firstView.center.y + percentage * 10);
   
       }
   }
   

These lines of code do create a parallax effect, but as the scrolling continues, the view does not return to it's original position if i scroll to the original starting position.

I have tried manipulating the views layers and frame, all with the same results.

Any Help will be much appreciated.

Answer 1

The problem you have is that you are basing your secondary scrolling on a ratio of offset to size, not just on the current offset. So when you increase from an offset of 99 to 100 (out of say 100) your secondary scroll increases by 10, but when you go back down to 99 your secondary scroll only decreases by 9.9, and is thereby no longer in the same spot as it was last time you were at 99. Non-linear scrolling is possible, but not the way you are doing it.

A possible easier way to deal with this is to create a second scrollview and place it below your actual scrollview. Make it non intractable (setUserInteractionEnabled:false) and modify it's contentOffset during the main scrolling delegate instead of trying to move a UIImageView manually.

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    [scrollView2 setContentOffset:CGPointMake(scrollView.contentOffset.x,scrollView.contentOffset.y * someScalingFactor) animated:NO];
}

But make sure not to set a delegate for the scrollView2, otherwise you may get a circular delegate method call that will not end well for you.