Close Menu

mxparallaxheader

About MXParallaxHeader

MXParallaxHeader is a powerful and customizable parallax header library for iOS apps. It allows developers to easily create stunning parallax effect headers in their applications.

Features

  • Smooth parallax scrolling effect
  • Supports both vertical and horizontal scroll views
  • Customizable appearance
  • Supports dynamic height changes
  • Easy to integrate into existing projects

Installation

To use MXParallaxHeader in your iOS project, follow these steps:

  1. Install the library using Cocoapods by adding pod 'MXParallaxHeader' to your Podfile and running pod install.
  2. Import the library in your code file using #import <MXParallaxHeader/MXParallaxHeader.h>.
  3. Read the documentation and explore available options to customize the parallax header to fit your app’s design.

Usage

To add a parallax header to your scroll view, you need to:

  1. Create an instance of MXParallaxHeader and set the desired height, minimum and maximum height, and other properties.
  2. Set the view you want as the parallax header using the parallaxHeader property of your scroll view.
  3. Make sure the content of your scroll view is taller than the space available for the parallax header to scroll smoothly.
// Step 1: Create and configure the parallax header
UIView *headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 200)];
headerView.backgroundColor = [UIColor blueColor];

MXParallaxHeader *parallaxHeader = [MXParallaxHeader parallaxHeaderWithView:headerView];
parallaxHeader.height = 200; // Set the desired height of the parallax header
parallaxHeader.minimumHeight = 64; // Set the minimum height of the header
parallaxHeader.mode = MXParallaxHeaderModeTopFill; // Configure the mode of the parallax header

// Step 2: Set the parallax header to your scrollview
self.scrollView.parallaxHeader = parallaxHeader;

// Step 3: Ensure the scroll view has enough content to enable smooth parallax scrolling
self.scrollView.contentSize = CGSizeMake(self.view.frame.size.width, self.view.frame.size.height + headerView.frame.size.height);

Customization Options

MXParallaxHeader offers various customization options to tailor the parallax header to your app:

  • height: The desired height of the parallax header.
  • minimumHeight: The minimum height the parallax header can shrink to when scrolling.
  • mode: The parallax header mode, which controls how it behaves when scrolling.
  • delegate: An optional delegate to receive events and perform custom actions.
  • contentView: The view inside the parallax header to add your custom content.

Additional Resources

For more details and examples on using MXParallaxHeader, visit the official GitHub repository.