Swift UI Parallax Playground

SwiftUIParallax.swift

import UIKit
import PlaygroundSupport
import SwiftUI

// Requires 2 images author.jpg and header.jpg in the Resources folder to work

struct ContentView: View {
    var body: some View {
        ScrollView {
            ParallaxView()
            VStack(alignment: .leading) {
                AuthorView()
                BlogView()
            }
            .frame(width: 350)
        }
        .edgesIgnoringSafeArea(.top)
    }
}

struct ParallaxView: View {
    var body: some View {
        GeometryReader { geometry in
            VStack {
                if geometry.frame(in: .global).minY <= 0 {
                    Image(uiImage: UIImage(named:"header.jpg")!)
                        .resizable()
                        .aspectRatio(contentMode: .fill)
                        .frame(width: geometry.size.width, height: geometry.size.height)
                        .offset(y: geometry.frame(in: .global).minY/9)
                        .clipped()
                }
                else {
                    Image(uiImage: UIImage(named:"header.jpg")!)
                        .resizable()
                        .aspectRatio(contentMode: .fill)
                        .frame(width: geometry.size.width, height: geometry.size.height + geometry.frame(in: .global).minY)
                        .clipped()
                        .offset(y: -geometry.frame(in: .global).minY)
                }
            }
        }
        .frame(height: 400)
    }
}

struct AuthorView: View {
    var body: some View {
        HStack {
            Image(uiImage: UIImage(named:"author.jpg")!)
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(width: 60, height: 60)
                .clipped()
                .cornerRadius(10)
            VStack(alignment: .leading) {
                Text("Article by")
                    .font(.custom("AvenirNext-Regular", size: 15))
                    .foregroundColor(.gray)
                Text("John Doe")
                    .font(.custom("AvenirNext-Demibold", size: 15))
            }
        }
        .padding(.top, 20)
    }
}

struct BlogView: View {
    let articleContent =
    """
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    """
    
    var body: some View {
        VStack(alignment: .leading) {
            Text("Lorem ipsum dolor sit amet")
                .font(.custom("AvenirNext-Bold", size: 30))
                .lineLimit(nil)
                .padding(.top, 10)
            Text("3 min read • 22. November 2019")
                .font(.custom("AvenirNext-Regular", size: 15))
                .foregroundColor(.gray)
                .padding(.top, 10)
            Text(articleContent)
                .font(.custom("AvenirNext-Regular", size: 20))
                .lineLimit(nil)
                .padding(.top, 30)
        }
    }
}

let viewController = UIHostingController(rootView: ContentView())

PlaygroundPage.current.liveView = viewController