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
FFBackgroundParallaxas a dependency in yourPodfilewith:
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 6Add 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];
}
@endTo add your background image, simply call:
- (void)setImageBackground:(UIImage *)imageif 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.