5

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?

nmock
  • 1,907
  • 2
  • 20
  • 29

1 Answers1

3

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.

Jason Grandelli
  • 342
  • 3
  • 10
  • How do I get the secondary view to land in the same spot each time? Should the contentSize of both scrollers be the same? The app is Instago on the app store, I want the colored boxes in the slideshow on the home page showing location to move at a different rate following the touch. I need the layers to move at different rates and I'm not too sure how moving layers as a percentage of the other would help achieve this effect. – nmock Jan 03 '13 at 00:22
  • If you want to download an app that has the affect I'm talking about check out https://itunes.apple.com/us/app/american-revolution-interactive/id489614145?mt=8 (it's free). In this app the back ground and the timeline (foreground) have different widths. So each moves the same percentage yet 10% of the foreground more pixels than 10% of the background so the foreground appears to move faster. If you want to keep view the same contentSize you can still choose move one faster but then the one that is moving faster will have to stop moving before the slower moving one does. – Jason Grandelli Jan 03 '13 at 13:38