Easy to subclass parallax UITableController w/ blurring image header, floating header, and UIScrollView for content
Switch branches/tags
Clone or download
pyro2927 Merge pull request #26 from francisjervis/master
Customize text font and color
Latest commit 329ee1c Aug 3, 2015



CI Status Version License Platform

ParallaxBlur aims the be an easy-to-use implementation of a UITableController with a parallax header. It is screen resolution independant, orientation indendant, and will automatically adjust if there is a navigation bar in place.

The user interaction is fairly straightforward. The header image blurs as you scroll up, leaving a 60 pixel area always visible, and expands out the header image if you pull down, while at the same time making the overlay views transparent.

Developed at Software for Good.

Inspiration was taken from Aaron Pang's SecretViewer. I liked the way it looked and behaved, but it wasn't extremely customizable, and not setup to be used as a Pod.

Basic Usage

Usage is pretty simple. Subclass JPBFloatingTextViewController and then customize it within viewDidLoad:

[self setHeaderImage:[UIImage imageNamed:@"meatballs.jpeg"]];
[self setTitleText:@"The Best Title in the World"];
[self setSubtitleText:@"ikea meatballs are the bomb"];

You should override the required UITableViewDatasource and UITableViewDelegate methods to supply the content section with cells and handle user selections.

Advanced Usage

You can also more heavily customize the header by using addHeaderOverlayView:. Using this will add the passed UIView to the scrolling header. An example can be seen in CustomHeaderViewController.m. You can get the height of the header (useful for getting things to align near the bottom) by calling [self headerHeight].

imageView = [[UIImageView alloc] initWithFrame:CGRectMake(15, [self headerHeight] - 100, 90, 90)];
[imageView setImage:[UIImage imageNamed:@"awesome.jpg"]];
[self addHeaderOverlayView:imageView];

Loading Images Asynchronously

If you want to load remote images, I'd recommend using SDWebImage. Example for using it with ParallaxBlur:

[[SDWebImageManager sharedManager] downloadImageWithURL:headerImageURL options:0 progress:^(NSInteger receivedSize, NSInteger expectedSize) {
    //Track progress if you wish
} completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {
    if (finished) {
      [self setHeaderImage:image];

Geeky Stuff

The view controller manages three UIScrollViews, one for the header/background, one for the lower content, and an "main" one to handle user interactions and delegate callbacks. The image "blurring" is just a gradual change in a secondary image overlay's alpha, which is a blurred version of the image set, precalculated and run through FXBlurView.


To run the example project, clone the repo, and run pod install from the Example directory first.


iOS 7.0 or higher.


ParallaxBlur is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod "ParallaxBlur"


pyro2927, joseph@pintozzi.com


ParallaxBlur is available under the MIT license. See the LICENSE file for more info.