SwiftUI Blog Post Screen Stretchy header with parallax scrolling effect

SwiftUI Blog Post Screen Stretchy header with parallax scrolling effect ContentView.swift

 
//
//  ContentView.swift
//  Test
//
//  Created by Cairocoders
//

import SwiftUI

struct ContentView: View {
    
    let articleContent =

    """
    Ang Bayan ng El Nido ay isang bayan at marine reserve park sa lalawigan ng Palawan, Pilipinas. Ito ay may 420 kilometrong layo sa timog-kanluran ng Maynila. Ayon sa senso ng 2015, ito ay may populasyon na 41,606 sa may 9,465 na kabahayan. 85% ng mga tao dito ay naninirahan sa mga bukirin, samantalang 15% na nalalabi ay makikita sa Población (town proper).

    Ang bayan ay makikita sa pinakahilagang dulo ng pulo ng Palawan. Ito ay binubuo ng 45 na mga pulo na may iba't ibang itsura at porma. Katulad ng kabuuang Palawan, ang El Nido ay kabilang sa Eurasian Plate, isang plate na hiwalay sa Philippine Plate na siyang kinabibilangan ng kabuuang bansa. Ang mga limestone cliffs na matatagpuan dito ay katulad ng mga matatagpuan sa Ha Long Bay sa Vietnam, Krabi sa Tailanda at Guillin sa Tsina na bahagi rin ng Eurasian Plate.
    """
    
    var body: some View {
        ScrollView {
            
            GeometryReader { geometry in // Implement Parallax Scrolling Header
                VStack {
                    if geometry.frame(in: .global).minY <= 0 {
                        Image("banner")
                            .resizable()
                            .aspectRatio(contentMode: .fill)
                            .frame(width: geometry.size.width, height: geometry.size.height)
                            .offset(y: geometry.frame(in: .global).minY/9)
                            .clipped()
                    } else {
                        Image("banner")
                            .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)
            
            VStack(alignment: .leading) {
                HStack {
                    Image("photo1")
                        .resizable()
                        .aspectRatio(contentMode: .fill)
                        .frame(width: 60, height: 60)
                        .clipped()
                        .cornerRadius(10)
                    VStack(alignment: .leading) {
                        Text("Article by")
                            .font(.title3)
                            .foregroundColor(.gray)
                        Text("Cairocoders")
                            .font(.title3)
                    }
                }
                .padding(.top, 20)
                
                Text("El Nido Palawan")
                    .font(.largeTitle)
                    .lineLimit(nil)
                    .padding(.top, 10)
                Text("23 min read • 22. July 2020")
                    .font(.title3)
                    .foregroundColor(.gray)
                    .padding(.top, 10)
                Text(articleContent)
                    .font(.title2)
                    .lineLimit(nil)
                    .padding(.top, 30)
                
            }//End VStack
            .frame(width: 350)
        }
        .edgesIgnoringSafeArea(.top)
    }
}


struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}