Parallax UIScrollview over UIImageView background image

Question

I am trying to develop a home screen where there is a UIImageView behind a Scrollview. I want the scroll view to scroll content over the image and have the image scroll up at a slower pace (parallax).

I've found a ton of solutions using a tableview or scrollview header, but that's not what I want.

I'm trying to mimic a similar behavior in the United Airlines mobile app, but I cannot seem to get the code right.

I have the UIImage View configured behind the scrollview, and I'm trying to use the solution here but I seem to be having trouble converting to Swift 4.

Any ideas?

Start

Scroll

Answer 1

Based on my answer to a very similar question https://stackoverflow.com/a/46727061/1433612

Assuming your imageView is a subview in the scrollView, use the UIScrollViewDelegate method scrollViewDidScroll to get the content offset. You can use that content offset to transform the imageView with your desired amount of "effect".

extension ViewController: UIScrollViewDelegate {
    public func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let offset = scrollView.contentOffset
        if offset.y > 0.0 {
            let parallaxFactor: CGFloat = 0.8
            let prallaxedOffset = offset.y * parallaxFactor
            let transform = CATransform3DTranslate(CATransform3DIdentity, 0, prallaxedOffset, 0)
            imageView.layer.transform = transform
        } else {
            imageView.layer.transform = CATransform3DIdentity
        }
    }
}