FFBackgroundParallax

Background Parallax Scrolling is a simple example for parallax scrolling based on several UIScrollViews. This library is simply a UIView subclass with two UIScrollView, one for content and the second for the background image.

Installation

Instead of adding the source files directly to your project, you may want to consider using CocoaPods to manage your dependencies. Follow the instructions on the CocoaPods site to install the gem, and specify FFBackgroundParallax as a dependency in your Podfile with:

pod 'FFBackgroundParallax', '~> 1.1.0'

But if you want to do it the old fashioned way, just add FFBackgroundParallax.h/m files to your project.

Requirements

ARC
iOS 8.0 and above

Usage

First you need to import the header file

#import "FFBackgroundParallax.h"

Then define your Total Items and your Item Image Size

#define kImageSize 250.0
#define kTotalItems 6

Add subviews normally to the public property contentScrollView

@implementation ViewController

- (void)viewDidLoad {
	[super viewDidLoad];
	
	[self configureBackgroundParallax];
}

- (void)configureBackgroundParallax {
	
	FFBackgroundParallax *backgroundParallax = [[FFBackgroundParallax alloc] initWithFrame:self.view.bounds];
	[backgroundParallax setImageBackground:[UIImage imageNamed:@"mountains.jpg"]];
	
	for (NSUInteger i = 0; i < kTotalItems; i++) {
		CGFloat xOrigin = (i * CGRectGetWidth(backgroundParallax.frame)) + (CGRectGetWidth(backgroundParallax.bounds) / 2) - (kImageSize / 2);
		
		UIImageView *badge = [[UIImageView alloc] initWithFrame:CGRectMake(xOrigin, (CGRectGetHeight(backgroundParallax.frame) / 2) - (kImageSize / 2), kImageSize, kImageSize)];
		
		badge.image = [UIImage imageNamed:[NSString stringWithFormat:@"%i", (i + 1)]];
		
		[backgroundParallax.contentScrollView addSubview:badge];
	}
	
	[backgroundParallax.contentScrollView setContentSize:CGSizeMake(CGRectGetWidth(backgroundParallax.frame) * kTotalItems, CGRectGetHeight(backgroundParallax.frame))];
	
	[self.view addSubview:backgroundParallax];
}

@end

To add your background image, simply call:

- (void)setImageBackground:(UIImage *)image

if you need vertical compatibility you need to change scrollingMode property to FFParallaxModeVertical when initialize the class:

FFBackgroundParallax *backgroundParallax = [[FFBackgroundParallax alloc] initWithFrame:self.view.bounds];
backgroundParallax.scrollingMode = FFParallaxModeVertical;

Todo

~~Vertical Compatibility~~
Swift Demo

Credits

Minimal Design Badges - https://dribbble.com/shots/1898692-Minimal-Design-Badges
Snowy Mountain Peaks Photo by Lee Roylland - https://unsplash.com/@roylandnye
New York, United States by Todd Quackenbush - https://unsplash.com/@toddquackenbush

Collaboration

Feel free to collaborate with ideas, issues and/or pull requests.

License

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

zrkb/FFBackgroundParallax