Skip to content
Easy to subclass parallax UITableController w/ blurring image header, floating header, and UIScrollView for content
Objective-C Ruby
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
Pod Merge pull request #1 from francisjervis/francisjervis-patch-1 Aug 2, 2015
.gitignore Intitial commit, laying out PBViewController Aug 22, 2014
.travis.yml Including `pod install` for travis Aug 22, 2014
LICENSE Initial commit Aug 22, 2014
ParallaxBlur.podspec Podspec version bump Sep 19, 2014 Adding info on asynchronously louding images Sep 19, 2014
asplode.png Adding geeky info Aug 26, 2014
preview.gif Adding info into README Aug 22, 2014


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"




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

You can’t perform that action at this time.