flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[wip] Update About page with Stack of cards for Steps

Browse Source
This commit is contained in:
Félix Péault
2022-08-09 20:52:46 +02:00
parent 8f299ba3ef
commit 386670b5b6
5 changed files with 238 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
src/routes/about.svelte
View File

@@ -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) => {
target.classList.toggle('is-visible', isIntersecting)
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)
}
})
// 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,38 +103,46 @@
</section>
<section class="about__process">
<div class="title">
<h2 class="title-big">{data.process_title}</h2>
<p class="text-normal">{data.process_subtitle}</p>
</div>
<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 }}
{@const imageRatio = image ? image.width / image.height : undefined}
<div class="step" data-part data-stay="true">
{#if image}
<Image
class="image shadow-box-dark"
id={image.id}
sizeKey="photo-grid"
sizes={{
small: { width: 400 },
medium: { width: 600 },
}}
ratio={imageRatio}
alt={image.title}
/>
{/if}
<div class="step__content">
<h3 class="text-label">{title}</h3>
<div class="text">
{@html text}
<div class="steps">
{#each data.process_steps as { title, text, image }, index}
{@const imageRatio = image ? image.width / image.height : undefined}
{@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"
id={image.id}
sizeKey="photo-grid"
sizes={{
small: { width: 400 },
medium: { width: 600 },
}}
ratio={imageRatio}
alt={image.title}
/>
{/if}
<div class="step__text">
<h3 class="title-medium">{title}</h3>
<div class="text text-small">
{@html text}
</div>
</div>
</div>
</div>
{/each}
<div class="step intention" data-part data-stay="true">
<p class="intention__text title-medium">
{/each}
</div>
<div class="step step--intention" style:--offset-top="120px">
<p class="step--intention__text title-medium">
{data.process_intention}
</p>
</div>

2
src/routes/about.ts
View File

@@ -78,8 +78,6 @@ export async function GET ({}: RequestEvent): Promise<RequestHandlerOutput> {
const { data: { photo: photos }} = photosRes
console.log(about)
return {
body: {
data: about,

6
src/style/_typography.scss
View File

@@ -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

3
src/style/molecules/_heading.scss
View File

@@ -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

255
src/style/pages/_about.scss
View File

@@ -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,46 +158,108 @@
}
}
// 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;
}
}
}
}
// Intention block
.intention {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: $color-tertiary;
text-align: center;
// Stacking
&:global(.is-stacked) {
position: sticky;
margin-bottom: calc(-1 * var(--offset-top) + 52px);
&__text {
width: 75%;
max-width: 512px;
@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 {
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;
}
}
}
}