Popularity
7.2
Growing
Activity
0.0
Stable
981
17
127

Programming language: Swift
License: MIT License
Tags: UI    
Latest version: v3.0.0

ParallaxHeader alternatives and similar libraries

Based on the "UI" category.
Alternatively, view ParallaxHeader alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of ParallaxHeader or a related project?

Add another 'UI' Library

README

ParallaxHeader

Simple way to add parallax header to UIScrollView or it's subclasses.

One image view Slider with images Blur vibrant text Blur round icon
Demo Demo Demo Demo

Try it here

Contents

Requirements

  • iOS 8.0+
  • Xcode 8.0+
  • Swift 3.0+

Installation

CocoaPods

CocoaPods is a dependency manager for Cocoa projects. You can install it with the following command:

$ gem install cocoapods

CocoaPods 1.1.0+ is required to build Reusable 1.0.0+.

To integrate ParallaxHeader into your Xcode project using CocoaPods, specify it in your Podfile:

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '8.0'
use_frameworks!

target '<Your Target Name>' do
    pod 'ParallaxHeader', '~> 3.0.0'
end

Then, run the following command:

$ pod install

Cocoapods versions

  • Swift5 : ruby pod 'ParallaxHeader', '~> 3.0.0'
  • Swift4 : ruby pod 'ParallaxHeader', '~> 2.0.0'
  • Swift3 : ruby pod 'ParallaxHeader', '~> 1.0.6'

Usage

To add parallax header to scroll view (table view) you need just create view and set it to your scroll view (table view).

Use case - one image view

  //create view as header view    
  let imageView = UIImageView()
  imageView.image = UIImage(named: "1")
  imageView.contentMode = .scaleAspectFill

  tableView.parallaxHeader.view = imageView
  tableView.parallaxHeader.height = 400
  tableView.parallaxHeader.minimumHeight = 0
  tableView.parallaxHeader.mode = .topFill

Use case - slider of images

let parallaxHeight: CGFloat = view.frame.height - 64 - 49 - sliderHeight
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .horizontal
collectionParallaxView = UICollectionView(
    frame: CGRect(x: 0, y: 0, width: view.frame.width, height: parallaxHeight),
    collectionViewLayout: layout
)
collectionParallaxView.isPagingEnabled = true
collectionParallaxView.showsHorizontalScrollIndicator = false
collectionParallaxView.backgroundColor = UIColor.white
collectionParallaxView.delegate = self
collectionParallaxView.dataSource = self

//adding view as parallax header to table view is straightforward
tableView.parallaxHeader.view = collectionParallaxView
tableView.parallaxHeader.height = parallaxHeight
tableView.parallaxHeader.minimumHeight = 0
tableView.parallaxHeader.mode = .centerFill
tableView.parallaxHeader.parallaxHeaderDidScrollHandler = { parallaxHeader in
    print(parallaxHeader.progress)
}

Use case - Blur vibrant text

  • Blur library is used here.
  • SnapKit library is used here. ```swift let imageView = UIImageView() imageView.image = UIImage(named: "profile") imageView.contentMode = .scaleAspectFill

//setup blur vibrant view imageView.blurView.setup(style: UIBlurEffectStyle.dark, alpha: 1).enable()

headerImageView = imageView

tableView.parallaxHeader.view = imageView tableView.parallaxHeader.height = 400 tableView.parallaxHeader.minimumHeight = 40 tableView.parallaxHeader.mode = .centerFill tableView.parallaxHeader.parallaxHeaderDidScrollHandler = { parallaxHeader in //update alpha of blur view on top of image view parallaxHeader.view.blurView.alpha = 1 - parallaxHeader.progress }

// Label for vibrant text let vibrantLabel = UILabel() vibrantLabel.text = "Vibrant" vibrantLabel.font = UIFont.systemFont(ofSize: 40.0) vibrantLabel.sizeToFit() vibrantLabel.textAlignment = .center imageView.blurView.vibrancyContentView?.addSubview(vibrantLabel) //add constraints using SnapKit library vibrantLabel.snp.makeConstraints { make in make.edges.equalToSuperview() }


## Use case - Blur round icon
- [Blur](https://github.com/romansorochak/Blur) library is used here.
- [SnapKit](https://github.com/SnapKit/SnapKit) library is used here.
```swift
let image = UIImage(named: "profile")

let imageView = UIImageView()
imageView.image = image
imageView.contentMode = .scaleAspectFill
parallaxHeaderView = imageView

//setup bur view
imageView.blurView.setup(style: UIBlurEffectStyle.dark, alpha: 1).enable()

tableView.parallaxHeader.view = imageView
tableView.parallaxHeader.height = 400
tableView.parallaxHeader.minimumHeight = 120
tableView.parallaxHeader.mode = .centerFill
tableView.parallaxHeader.parallaxHeaderDidScrollHandler = { parallaxHeader in
    //update alpha of blur view on top of image view
    parallaxHeader.view.blurView.alpha = 1 - parallaxHeader.progress
}

let roundIcon = UIImageView(
    frame: CGRect(x: 0, y: 0, width: 100, height: 100)
)
roundIcon.image = image
roundIcon.layer.borderColor = UIColor.white.cgColor
roundIcon.layer.borderWidth = 2
roundIcon.layer.cornerRadius = roundIcon.frame.width / 2
roundIcon.clipsToBounds = true

//add round image view to blur content view
//do not use vibrancyContentView to prevent vibrant effect
imageView.blurView.blurContentView?.addSubview(roundIcon)
//add constraints using SnpaKit library
roundIcon.snp.makeConstraints { make in
    make.center.equalToSuperview()
    make.width.height.equalTo(100)
}

Author

Roman Sorochak - iOS developer - [email protected]

License

ParallaxHeader is released under the MIT license. See LICENSE for details.


*Note that all licence references and agreements mentioned in the ParallaxHeader README section above are relevant to that project's source code only.