Parallax effect (iOS7)

Another of the cool visual effects in iOS7 as well as the blurred overlay is the Parallax effect on the home screen and lock screen.

Parallax is a trick of the eye, where by if something in the background moves slower than something int he foreground you can create the illusion of depth and 3D space. An example of this would be if you sit on a train and look out the window, the trees and bushes nearby the train flash past quickly but the background scene seems to pass more slowly. Of course everything is really changing at a speed relative to the train, it’s just an effect of being closer to something. That in short is what a Parallax effect is.

So, in iOS7 apple have used this to create an illusion of depth by making the icons appear to float above the background image. This works best with a background image that already has some depth to it, to enhance the illusion.

In this video tutorial I will show you how to recreate it in a simple form. This is by no means a polished finished sample code, I am making this quickly in response to a request for how to achieve this effect. However, this should give you a good starting point as to learning how this effect is achieved.

We will tap into the iPhones accelerometer. This will allow us to detect the position in 3D space and tilt of the device. We will then translate the raw data from the accelerometer into integer values. These integer values will become the variables used to decide how much to offset/move/transform the background image in 2D space on the iPhone screen.

The effect can mostly be seen when you start with the device flat and you raise it upwards towards your face to view the screen.

Here’s the sample project file for you to download

- (void)accelerometer:(UIAccelerometer *)accelerometer didAccelerate:(UIAcceleration *)acceleration {
    labelX.text = [NSString stringWithFormat:@"%@%f", @"X: ", acceleration.x];
    labelY.text = [NSString stringWithFormat:@"%@%f", @"Y: ", acceleration.y];
    labelZ.text = [NSString stringWithFormat:@"%@%f", @"Z: ", acceleration.z];
    self.progressX.progress = ABS(acceleration.x);
    self.progressY.progress = ABS(acceleration.y);
    self.progressZ.progress = ABS(acceleration.z);
    int xPosition = acceleration.x*30;
    int yPosition = acceleration.y*30;
    _translateLabel.text = [NSString stringWithFormat:@"transform by %dx and %dfy", xPosition, yPosition];
    [UIView animateWithDuration:0.3 animations:^{
        _BGimage.transform = CGAffineTransformMakeTranslation(0.0-xPosition, 0.0-yPosition);

The block of code above is the most pertinent code. It is the delegate callback from the accelerometer. Here we are taking the accelerometer values and then translating them from a decimal value 0.0-1.0 and multiplying it by 30. This gives us a value between -30 and +30 (remember the accelerometer works in +ve and -ve axis 0 being the “balancing point”.) we then translate those values into our animation to move the background image the desired number of pixels relative to the superview.

fbPage@2x Get in AppStore

Tagged , , , , , , , , , , ,

3 thoughts on “Parallax effect (iOS7)

  1. […] Here’s the video from previous tutorial on how to create this effect. […]

  2. barrowclough says:

    I’ve come up with another method for this effect using the UIScrollView see here

  3. This was useful. Thanks.

Leave a Reply

%d bloggers like this: