Swiftpack.co - Package - fortmarek/ParallaxOverlay

ParallaxOverlay

CI Status Version Swift Package Manager Twitter: @marekfort

demo

ParallaxOverlay is a quick solution if you want parallax for your overlay view in UICollectionView.

Installation

SPM

ParallaxOverlay is available via Swift Package Manager.

Using Xcode 11, go to File -> Swift Packages -> Add Package Dependency and enter https://github.com/fortmarek/ParallaxOverlay

CocoaPods

ParallaxOverlay is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod 'ParallaxOverlay'

Implementing this is quite easy, firstly, use the provided custom UICollectionViewFlowLayout:

let parallaxLayout = ParallaxLayout()
let collectionView = UICollectionView(frame: .zero, collectionViewLayout: parallaxLayout)
// Recommended for better paging effect
collectionView.decelerationRate = .fast

// Our collection view needs to be bigger than our `view`, otherwise the cells would die when off-screen and our parallax values would just disappear
let collectionViewOverlap: CGFloat = 30
collectionView.contentInset = UIEdgeInsets(top: 0, left: -collectionViewOverlap, bottom: 0, right: collectionViewOverlap)
collectionView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: -collectionViewOverlap).isActive = true
collectionView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: collectionViewOverlap).isActive = true

Then go to your UICollectionViewCell that you use in the UICollectionView which you just created and let's implement func apply(_ layoutAttributes: UICollectionViewLayoutAttributes) function where we need to specify how to actually apply our parallax:

// Applying parallaxValue
override func apply(_ layoutAttributes: UICollectionViewLayoutAttributes) {
    super.apply(layoutAttributes)

    guard let layoutAttributes = layoutAttributes as? ParallaxLayoutAttributes else { return }

    // Max horizontal parallax from initial position
    let maxHorizontalParallax: CGFloat = 80

    // Default leading offset of infoStackView
    yourParallaxConstraint.constant = layoutAttributes.parallaxValue * maxHorizontalParallax
}

In this function we just apply parallaxValue to the constraint we would like to move off the axis.

...and we are all set! 🙂 Enjoy 🚀

Github

link
Stars: 3
Help us keep the lights on

Dependencies

Used By

Total: 0

Releases

0.1 - Jul 30, 2019

Hey, excited that you are here! This is the first version of this small library 🙂