Scroll a background in a different speed on a UIScrollView

Question

When somebody does a wipe gesture to scroll the content from left to right, I would like to have a background image scrolling into the same direction, but at a different speed. Much like what these classic games did do 20 years ago (remember that, anybody????)

Answer 1

I accomplished this by using two UIScrollView instances. The first is where the actual content is displayed, and the second (which is behind the first in z-order) is where I have my slower-moving background. From there the top UIScrollView has a delegate attached to it that gets notified when the contentOffset changes. That delegate, in turn, programatically sets the contentOffset of the background scroller, multiplied against a constant to slow the scroll down relative to the foreground. So, for instance, you might have something like:

// Defined as part of the delegate for the foreground UIScrollView
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    UIScrollView* scroll_view(static_cast<UIScrollView*>(bkg_scroller_m.view));
    CGPoint       offset(scrollView.contentOffset);

    offset.x = offset.x / 3;
    offset.y = offset.y / 3;

    // Scroll the background scroll view by some smaller offset
    scroll_view.contentOffset = offset;
}

Answer 2

You can easily do this by implementing scroll view did scroll with a UIImageView under it... You'll end up with something like this... with the backgroundImageView being a UIImageView added to the view before the subview... you can layer as much image views as you want without performance issues

    - (void)scrollViewDidScroll:(UIScrollView *)scrollView
    {    
         float factor = scrollView.contentOffset.x / (scrollView.contentSize.width - 320);
         if (factor < 0) factor = 0;
         if (factor > 1) factor = 1;

         CGRect frame = backgroundImageView.frame;
         frame.origin.x = factor * (320 - backgroundImageView.frame.size.width);
         backgroundImageView.frame = frame;
    }

Answer 3

You can do it with CoreAnimation. You'll want to hook into the scrollViewDidEndDragging:willDecelerate: and scrollViewWillBeginDecelerating: UIScrollViewDelegate methods. Then begin an Animation on your image by changing the center position. See this SO article for more on animations.

Answer 4

For example you have multiple scrollviews, want them scroll difference speed. here is the modification code base on Salamatizm answer:

CGSize screenSize = [[UIScreen mainScreen] bounds].size;
  float factor = scrollView.contentOffset.x / (scrollView.contentSize.width - screenSize.width);
  if (factor < 0) factor = 0;
  if (factor > 1) factor = 1;

  CGSize parralaxSize = self.parralaxBackgroundView.contentSize;
  CGPoint parallaxOffset = CGPointMake(-(factor * (screenSize.width - parralaxSize.width)), 0);
  [self.parralaxBackgroundView setContentOffset:parallaxOffset animated:NO];