Created
December 2, 2019 22:40
-
-
Save eoghain/de9304aa07058e787ab2d6bcb853ed91 to your computer and use it in GitHub Desktop.
Swift UI Parallax Playground
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment