[wip] Update About page with Stack of cards for Steps
This commit is contained in:
@@ -4,7 +4,7 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { onMount, afterUpdate } from 'svelte'
|
||||
import { map } from '$utils/functions'
|
||||
import { map, lerp } from '$utils/functions'
|
||||
// Components
|
||||
import Metas from '$components/Metas.svelte'
|
||||
import PageTransition from '$components/PageTransition.svelte'
|
||||
@@ -24,7 +24,9 @@
|
||||
let photosGridEl: HTMLElement
|
||||
let photosGridOffset: number = photosGridEl && photosGridEl.offsetTop
|
||||
let sectionsObserver: IntersectionObserver
|
||||
let stepsObserver: IntersectionObserver
|
||||
|
||||
$: isMobile = innerWidth < 550
|
||||
$: parallaxPhotos = photosGridEl && map(scrollY, photosGridOffset - innerHeight, photosGridOffset + innerHeight / 1.5, 0, innerHeight * 0.15, true)
|
||||
$: fadedPhotosIndexes = innerWidth > 768
|
||||
? [0, 2, 5, 7, 9, 12, 17, 20, 22, 26, 30, 32, 34]
|
||||
@@ -33,29 +35,43 @@
|
||||
|
||||
onMount(() => {
|
||||
// Sections observer
|
||||
sectionsObserver = new IntersectionObserver(entries => {
|
||||
entries.forEach(({ isIntersecting, target }: { target: HTMLElement } & IntersectionObserverEntry) => {
|
||||
sectionsObserver = new IntersectionObserver(([{ isIntersecting, target }]: [IntersectionObserverEntry] & [{ target: HTMLElement }]) => {
|
||||
target.classList.toggle('is-visible', isIntersecting)
|
||||
|
||||
// Run effect once
|
||||
if (isIntersecting && target.dataset.stay) {
|
||||
sectionsObserver.unobserve(target)
|
||||
}
|
||||
})
|
||||
}, {
|
||||
threshold: 0.3,
|
||||
threshold: 0.5,
|
||||
rootMargin: '0% 0px 0%'
|
||||
})
|
||||
|
||||
const sections = document.querySelectorAll('.about [data-part]')
|
||||
sections.forEach(section => sectionsObserver.observe(section))
|
||||
|
||||
|
||||
// Steps observer
|
||||
stepsObserver = new IntersectionObserver(entries => {
|
||||
entries.forEach(({ intersectionRatio, target }: IntersectionObserverEntry) => {
|
||||
target.classList.toggle('is-pinned', intersectionRatio < 1)
|
||||
})
|
||||
}, {
|
||||
threshold: 1,
|
||||
rootMargin: '-10% 0px 75%',
|
||||
})
|
||||
const steps = document.querySelectorAll('.about__process .step.is-stacked')
|
||||
steps.forEach(step => stepsObserver.observe(step))
|
||||
|
||||
|
||||
// Destroy
|
||||
return () => {
|
||||
sectionsObserver && sectionsObserver.disconnect()
|
||||
stepsObserver && stepsObserver.disconnect()
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
afterUpdate(() => {
|
||||
// Update photos grid top offset
|
||||
photosGridOffset = photosGridEl.offsetTop
|
||||
@@ -87,15 +103,21 @@
|
||||
</section>
|
||||
|
||||
<section class="about__process">
|
||||
<div class="container grid">
|
||||
<div class="title">
|
||||
<h2 class="title-big">{data.process_title}</h2>
|
||||
<p class="text-normal">{data.process_subtitle}</p>
|
||||
</div>
|
||||
|
||||
<div class="steps container-wide">
|
||||
{#each data.process_steps as { title, text, image }}
|
||||
<div class="steps">
|
||||
{#each data.process_steps as { title, text, image }, index}
|
||||
{@const imageRatio = image ? image.width / image.height : undefined}
|
||||
<div class="step" data-part data-stay="true">
|
||||
{@const indexProgress = index / (data.process_steps.length - 1) * 1}
|
||||
<div class="step grid is-stacked"
|
||||
style:--opacity-index={lerp(0.3, 0.05, indexProgress)}
|
||||
style:--scale={lerp(0.925, 1, indexProgress)}
|
||||
style:--offset-top="{lerp(isMobile ? 16 : 48, isMobile ? 64 : 120, indexProgress)}px"
|
||||
>
|
||||
{#if image}
|
||||
<Image
|
||||
class="image shadow-box-dark"
|
||||
@@ -109,16 +131,18 @@
|
||||
alt={image.title}
|
||||
/>
|
||||
{/if}
|
||||
<div class="step__content">
|
||||
<h3 class="text-label">{title}</h3>
|
||||
<div class="text">
|
||||
<div class="step__text">
|
||||
<h3 class="title-medium">{title}</h3>
|
||||
<div class="text text-small">
|
||||
{@html text}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
<div class="step intention" data-part data-stay="true">
|
||||
<p class="intention__text title-medium">
|
||||
</div>
|
||||
|
||||
<div class="step step--intention" style:--offset-top="120px">
|
||||
<p class="step--intention__text title-medium">
|
||||
{data.process_intention}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -78,8 +78,6 @@ export async function GET ({}: RequestEvent): Promise<RequestHandlerOutput> {
|
||||
|
||||
const { data: { photo: photos }} = photosRes
|
||||
|
||||
console.log(about)
|
||||
|
||||
return {
|
||||
body: {
|
||||
data: about,
|
||||
|
||||
@@ -121,9 +121,13 @@
|
||||
|
||||
// Normal
|
||||
.text-normal {
|
||||
font-size: rem(22px);
|
||||
font-size: rem(18px);
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
|
||||
@include bp (sm) {
|
||||
font-size: rem(22px);
|
||||
}
|
||||
}
|
||||
|
||||
// Small
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
.heading {
|
||||
overflow: hidden;
|
||||
margin-bottom: 72px;
|
||||
text-align: center;
|
||||
color: $color-tertiary;
|
||||
|
||||
@include bp (sm) {
|
||||
margin-bottom: 128px;
|
||||
margin-bottom: clamp(72px, 8vw, 128px);
|
||||
}
|
||||
|
||||
// Title
|
||||
|
||||
@@ -3,10 +3,10 @@
|
||||
** Purpose
|
||||
*/
|
||||
&__purpose {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
.container-wide {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
@@ -14,7 +14,6 @@
|
||||
min-height: calc(100vh - var(--sides));
|
||||
color: #fff;
|
||||
padding: 0 8%;
|
||||
box-shadow: inset 0 0 0 2px $color-primary-tertiary20;
|
||||
border-radius: 16px;
|
||||
|
||||
@include bp (sm) {
|
||||
@@ -66,19 +65,32 @@
|
||||
margin: 128px 0 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
@include bp (mob-lg, max) {
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
grid-column: 1 / -1;
|
||||
max-width: 400px;
|
||||
margin: 0 auto 48px;
|
||||
padding: 0 16px;
|
||||
padding: 0 32px;
|
||||
text-align: center;
|
||||
|
||||
@include bp (sm) {
|
||||
grid-column: 1 / -1;
|
||||
margin-bottom: 80px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 24px;
|
||||
margin-bottom: 16px;
|
||||
color: $color-secondary;
|
||||
|
||||
@include bp (sm) {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
p {
|
||||
color: $color-tertiary;
|
||||
@@ -88,77 +100,56 @@
|
||||
|
||||
// Steps grid
|
||||
.steps {
|
||||
// gap: 8px;
|
||||
grid-column: 1 / -1;
|
||||
|
||||
@include bp (sm) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(16, 1fr);
|
||||
gap: 12px;
|
||||
grid-column: 4 / -4;
|
||||
margin-bottom: 120px;
|
||||
}
|
||||
|
||||
& > * {
|
||||
--delay: 150ms;
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 40px, 0);
|
||||
transition-property: opacity, transform;
|
||||
transition-duration: 1.6s;
|
||||
transition-timing-function: var(--ease-quart);
|
||||
|
||||
// Add reveal delay for every second item
|
||||
&:nth-child(2n) {
|
||||
transition-delay: var(--delay);
|
||||
@include bp (sm) {
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
// Visible step state
|
||||
:global(.is-visible) {
|
||||
opacity: 1;
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
}
|
||||
|
||||
// Each Step
|
||||
.step {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 48px;
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
padding: 56px 32px 32px;
|
||||
background: $color-primary-darker;
|
||||
border-radius: 8px;
|
||||
border-radius: 12px;
|
||||
transform-origin: top center;
|
||||
transition: transform 0.8s var(--ease-quart);
|
||||
|
||||
@include bp (sm) {
|
||||
min-height: 480px;
|
||||
--columns: 18;
|
||||
display: grid;
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
padding: 5.5% 0;
|
||||
min-height: min(45vw, 720px);
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
grid-column: span 10;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
grid-column: span 6;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
grid-column: span 6;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
grid-column: span 10;
|
||||
}
|
||||
&:nth-child(5) {
|
||||
grid-column: span 8;
|
||||
}
|
||||
&:nth-child(6) {
|
||||
grid-column: span 8;
|
||||
}
|
||||
|
||||
// Image
|
||||
:global(.image) {
|
||||
display: block;
|
||||
margin-right: auto;
|
||||
width: 60%;
|
||||
max-width: 600px;
|
||||
max-height: 364px;
|
||||
overflow: hidden;
|
||||
width: 70%;
|
||||
margin: 0 auto 64px;
|
||||
border-radius: 6px;
|
||||
|
||||
@include bp (sm) {
|
||||
grid-column: 11 / -2;
|
||||
grid-row: 1 / -1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
:global(img) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
@@ -167,49 +158,111 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Content
|
||||
&__content {
|
||||
max-width: 568px;
|
||||
width: 80%;
|
||||
margin-top: 40px;
|
||||
|
||||
// Text
|
||||
&__text {
|
||||
@include bp (sm) {
|
||||
margin-top: auto;
|
||||
padding-top: 40px;
|
||||
grid-column: 2 / span 7;
|
||||
grid-row: 2;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 8px;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
.text {
|
||||
line-height: 1.4;
|
||||
font-weight: 300;
|
||||
color: $color-secondary-light;
|
||||
|
||||
@include bp (sm) {
|
||||
font-size: rem(18px);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
.text {
|
||||
line-height: 1.5;
|
||||
font-weight: 300;
|
||||
color: $color-secondary-light;
|
||||
}
|
||||
}
|
||||
|
||||
// Overlay
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.8s var(--ease-quart);
|
||||
}
|
||||
|
||||
// Alternate content order
|
||||
&:nth-child(even) {
|
||||
:global(.image) {
|
||||
@include bp (sm) {
|
||||
grid-column: 2 / span 7;
|
||||
}
|
||||
}
|
||||
.step__text {
|
||||
@include bp (sm) {
|
||||
grid-column: 11 / -2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Stacking
|
||||
&:global(.is-stacked) {
|
||||
position: sticky;
|
||||
margin-bottom: calc(-1 * var(--offset-top) + 52px);
|
||||
|
||||
@include bp (sm) {
|
||||
margin-bottom: calc(-1 * var(--offset-top) + 30px);
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: var(--offset-top);
|
||||
}
|
||||
}
|
||||
|
||||
// Is pinned
|
||||
&:global(.is-pinned) {
|
||||
transform: scale(var(--scale)) translateZ(0);
|
||||
top: var(--offset-top);
|
||||
|
||||
&:before {
|
||||
opacity: var(--opacity-index);
|
||||
}
|
||||
}
|
||||
|
||||
// Intention block
|
||||
.intention {
|
||||
&--intention {
|
||||
grid-column: 1 / -1;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
color: $color-tertiary;
|
||||
text-align: center;
|
||||
|
||||
@include bp (sm, max) {
|
||||
padding-top: 56px;
|
||||
padding-bottom: 56px;
|
||||
}
|
||||
@include bp (sm) {
|
||||
grid-column: 4 / -4;
|
||||
}
|
||||
|
||||
&__text {
|
||||
width: 75%;
|
||||
max-width: 512px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
@@ -218,10 +271,10 @@
|
||||
&__photos {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-top: -32px;
|
||||
margin-top: -64px;
|
||||
|
||||
@include bp (sm) {
|
||||
margin-top: -80px;
|
||||
margin-top: -120px;
|
||||
}
|
||||
|
||||
.container-wide {
|
||||
@@ -230,21 +283,31 @@
|
||||
|
||||
.photos-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 12px;
|
||||
margin: -5% -5% 0;
|
||||
transform: rotate(-6deg) translateY(var(--parallax-y)) translateZ(0);
|
||||
transition: transform 0.8s var(--ease-quart);
|
||||
|
||||
@include bp (sm) {
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
gap: 12px;
|
||||
margin: -5% -5% 0;
|
||||
}
|
||||
}
|
||||
|
||||
:global(picture) {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition: opacity 1s var(--ease-quart);
|
||||
|
||||
@include bp (sm) {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
:global(img) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
@@ -293,6 +356,8 @@
|
||||
|
||||
// Modules
|
||||
.grid-modules {
|
||||
grid-column: 1 / -1;
|
||||
|
||||
@include bp (sm) {
|
||||
grid-column: 2 / -2;
|
||||
}
|
||||
@@ -303,24 +368,28 @@
|
||||
&__interest {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: block;
|
||||
margin-bottom: 20px;
|
||||
padding: 72px 32px;
|
||||
background: $color-primary-tertiary20;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0px -24px 120px rgba($color-primary-darker, 0.8);
|
||||
|
||||
@include bp (sm) {
|
||||
display: grid;
|
||||
grid-column: 2 / -2;
|
||||
margin-bottom: 48px;
|
||||
padding: 120px 0;
|
||||
padding: clamp(72px, 8vw, 160px) 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 56px;
|
||||
grid-column: 1 / -1;
|
||||
margin-bottom: 64px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
|
||||
@include bp (sm) {
|
||||
margin-bottom: 88px;
|
||||
margin-bottom: 104px;
|
||||
}
|
||||
}
|
||||
.blocks {
|
||||
@@ -334,14 +403,26 @@
|
||||
.block {
|
||||
text-align: center;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 64px;
|
||||
|
||||
@include bp (sm) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 12px;
|
||||
color: $color-secondary-light;
|
||||
font-weight: 600;
|
||||
}
|
||||
p {
|
||||
margin-bottom: 32px;
|
||||
margin-bottom: 24px;
|
||||
font-weight: 300;
|
||||
|
||||
@include bp (sm) {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user