Search code examples
iosuiviewuiscrollviewparallaxuiscrollviewdelegate

Horizontal Parallax Scrolling UIScrollView iOS

I'm trying to implement horizontal parallax on a paging scroll view which makes it so that one view appears to advance faster in the x direction but "lands" in the same spot (for example, say (0,0)). Here is my general setup / view hierarchy:

  • (transparent scroller, which intercepts / passes through scroll events)
  • (object overlay that I want to move 1.2x pace in the x direction, but doesn't surpass it's "landing spot")
  • (another overlay that I want to move at a 1.0x pace in the x direction)

I know it has to do something with modifying the contentOffset and I have my delegates all setup so that they can all move at the 1x pace in the same direction...any hints as to the solution?

Solution

  • If you want to keep your current setup all you need to do is use the -(void)scrollViewDidScroll:(UIScrollView *)scroller delegate method with your scroller that is tracking the scroll events. In this method you will track the content offset and then use your speed multipliers to move your other views the way you want them to.

    However you can easily do this with just 2 scrollviews, and when one moves you track its contentOffset in the same -(void)scrollViewDidScroll:(UIScrollView *)scroller delegate method and move the other accordingly.

    Furthermore, if the two scrollviews are of different sizes, a natural parallax effect is incredibly easy to achieve tracking the contentOffset in the -(void)scrollViewDidScroll:(UIScrollView *)scroller delegate method and then using the value and the scrollview's contentSize to get a percentage of how far the scrollview moved and then simply set the contentOffset of the secondary scrollview to scroll that percentage of it's contentSize.

    Let me know if you need further explanation.