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

[wip] Make About page Process step a component

Browse Source 
Also an attempt to manage the stacking effect of the steps but still not good 🙃 tricky shit
This commit is contained in:
Félix Péault
2022-08-11 23:07:50 +02:00
parent 4f75c5a4a0
commit 0c82464a98
4 changed files with 218 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/routes/about.svelte
View File

@@ -4,14 +4,14 @@
<script lang="ts">
import { onMount, afterUpdate } from 'svelte'
import { map, lerp } from '$utils/functions'
import { map } from '$utils/functions'
// Components
import Metas from '$components/Metas.svelte'
import PageTransition from '$components/PageTransition.svelte'
import AboutGridPhoto from '$components/atoms/AboutGridPhoto.svelte'
import Image from '$components/atoms/Image.svelte'
import Button from '$components/atoms/Button.svelte'
import Heading from '$components/molecules/Heading.svelte'
import ProcessStep from '$components/molecules/ProcessStep.svelte'
import ShopModule from '$components/organisms/ShopModule.svelte'
import NewsletterModule from '$components/organisms/NewsletterModule.svelte'
@@ -24,9 +24,8 @@
let photosGridEl: HTMLElement
let photosGridOffset: number = photosGridEl && photosGridEl.offsetTop
let sectionsObserver: IntersectionObserver
let stepsObserver: 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]
@@ -52,22 +51,20 @@
// 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))
// stepsObserver = new IntersectionObserver(([{ intersectionRatio, target }]) => {
// target.classList.toggle('is-pinned', intersectionRatio < 1)
// }, {
// threshold: 1,
// rootMargin: '-10% 0px 50%',
// })
// const steps = document.querySelectorAll('.about__process .steps > *')
// steps.forEach(step => stepsObserver.observe(step))
// Destroy
return () => {
sectionsObserver && sectionsObserver.disconnect()
stepsObserver && stepsObserver.disconnect()
// sectionsObserver && sectionsObserver.disconnect()
// stepsObserver && stepsObserver.disconnect()
}
})
@@ -111,38 +108,15 @@
<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>
<ProcessStep index={index + 1}
{title} {text} {image}
progress={index / (data.process_steps.length - 1) * 1}
/>
{/each}
</div>
<div class="step step--intention" style:--offset-top="120px">
<p class="step--intention__text title-medium">
<div class="intention" style:--offset-top="120px">
<p class="intention__content title-medium">
{data.process_intention}
</p>
</div>