Latest 0.1.3
Homepage https://github.com/ModernProgrammer/UICollectionViewParallaxCell
License MIT
Platforms ios 9.0
Frameworks UIKit
Authors

Version
License
Platform

Description

A simple way of implementing a parallax effect on a UICollectionView. With UICollectionViewParallaxCell, you will be able to easily implement a parallax effect on either a vertical or horizontal scroll.

ParallaxCellDemo

Here is a video of a vertical scroll Demo

Functionality

With the UICollectionViewParallaxCell, you have control over the following:

  • Parallax effect:
    • Vertical Scroll
    • Horizontal Scroll
  • Constraints
    • Top Constraint
    • Bottom Constraint
    • Left Constraint
    • Right Constraint
  • ParallaxOffset speed

Installation

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

pod 'UICollectionViewParallaxCell'

UICollectionViewParallaxCell Example

*Note:This is assuming you have a UICollectionView currently created.

Once installed, go to your Custom UICollectionViewCell class and import UICollectionViewParallaxCell

import UICollectionViewParallaxCell

In your custom UICollectionViewCell class, inherit the UICollectionViewParallaxCell class.

class CustomParallaxCell: UICollectionViewParallaxCell {...}

Within that class declare a UIImage

class CustomParallaxCell: UICollectionViewParallaxCell {
        var backgroundImage : UIImage? {
                didSet {
                    guard let image = backgroundImage else { return }
                    setupbackgroundParallax(image: image, paddingOffset: paddingOffset, topConstraint: 0, bottomConstraint: 0, leadingConstraint: 0, trailingConstraint: 0)
                }
            }
        }
}

*Note: paddingOffset is a variable declared within the UICollectionViewParallaxCell which by default is a CGFloat of 0. We will update the offset within the collectionView function, cellForItemAt.

In the class with your UICollectionView, go to your cellForItemAt function.
Within in it declare the following:

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath) as! CustomParallaxCell
        cell.paddingOffset = 150 // declares the offset intensity of parallax
        cell.backgroundImage = // pass through object to instantiate the setupbackgroundParallax function in the didSet
        let bounds = collectionView.bounds // variable for the collectionView bounds
        cell.parallaxOffset(collectionViewBounds: bounds, scrollDirecton: .vertical) // instantiate the inital bounds of the collectionview
        return cell
}

Next call the scrollViewDidScroll function in the class with your UICollectionView.
Declare the following:

func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let cells = collectionView.visibleCells as! [CustomParallaxCell]
        let bounds = collectionView.bounds
        for cell in cells {
            cell.parallaxOffset(collectionViewBounds: bounds, scrollDirecton: .vertical)
        }
}

Run project and enjoy.

Author

Diego Bustamante, [email protected]

License

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

Latest podspec

{
    "name": "UICollectionViewParallaxCell",
    "version": "0.1.3",
    "summary": "A parallax effect for a UICollectionViewCell.",
    "description": "This CocoaPod will easily allow you to add a parallax effect on either a vertical or horizontal scroll on a UICollectionView.",
    "homepage": "https://github.com/ModernProgrammer/UICollectionViewParallaxCell",
    "screenshots": "https://s3.amazonaws.com/diegophotos/github/ParallaxCells.png",
    "license": {
        "type": "MIT",
        "file": "LICENSE"
    },
    "authors": {
        "Diego Bustamante": "[email protected]"
    },
    "source": {
        "git": "https://github.com/ModernProgrammer/UICollectionViewParallaxCell.git"
    },
    "platforms": {
        "ios": "9.0"
    },
    "source_files": "UICollectionViewParallaxCell/Classes/**/*",
    "frameworks": "UIKit"
}

Pin It on Pinterest

Share This