[wip] Make About page Process step a component
Also an attempt to manage the stacking effect of the steps but still not good 🙃 tricky shit
This commit is contained in:
58
src/components/molecules/ProcessStep.svelte
Normal file
58
src/components/molecules/ProcessStep.svelte
Normal file
@@ -0,0 +1,58 @@
|
||||
<style lang="scss">
|
||||
@import "../../style/molecules/process-step";
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import { lerp } from '$utils/functions'
|
||||
// Components
|
||||
import Image from '$components/atoms/Image.svelte'
|
||||
|
||||
export let index: number
|
||||
export let title: string
|
||||
export let text: string
|
||||
export let image: any = undefined
|
||||
export let progress: number = 0
|
||||
|
||||
let stepEl: HTMLElement
|
||||
let scrollY: number, innerWidth: number, innerHeight: number
|
||||
const imageRatio = image ? image.width / image.height : undefined
|
||||
const scale = lerp(0.925, 1, progress)
|
||||
|
||||
$: isMobile = innerWidth < 550
|
||||
$: offsetTop = stepEl && stepEl.offsetTop
|
||||
$: offsetStagger = lerp(isMobile ? 16 : 48, isMobile ? 64 : 120, progress)
|
||||
$: isPinned = scrollY - innerHeight * 1.4 >= offsetTop
|
||||
</script>
|
||||
|
||||
<svelte:window bind:scrollY bind:innerWidth bind:innerHeight />
|
||||
|
||||
<div bind:this={stepEl}
|
||||
class="step"
|
||||
class:is-pinned={isPinned}
|
||||
style:--index={index}
|
||||
style:--opacity-index={lerp(0.3, 0.05, progress)}
|
||||
style:--scale={scale}
|
||||
style:--offset-top="{offsetStagger}px"
|
||||
>
|
||||
<div class="step__card grid">
|
||||
{#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="content">
|
||||
<h3 class="title-medium">{title}</h3>
|
||||
<div class="text text-small">
|
||||
{@html text}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -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>
|
||||
|
||||
118
src/style/molecules/_process-step.scss
Normal file
118
src/style/molecules/_process-step.scss
Normal file
@@ -0,0 +1,118 @@
|
||||
// About page Step
|
||||
.step {
|
||||
position: sticky;
|
||||
top: var(--offset-top);
|
||||
|
||||
// Card
|
||||
&__card {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
padding: 56px 32px 32px;
|
||||
background: $color-primary-darker;
|
||||
border-radius: 12px;
|
||||
transform-origin: top center;
|
||||
transition: transform 0.8s var(--ease-quart);
|
||||
|
||||
@include bp (sm) {
|
||||
--columns: 18;
|
||||
display: grid;
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
padding: 5.5% 0;
|
||||
min-height: min(45vw, 720px);
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
// 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);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Image
|
||||
:global(.image) {
|
||||
display: block;
|
||||
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%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
// Content
|
||||
.content {
|
||||
@include bp (sm) {
|
||||
grid-column: 2 / span 7;
|
||||
grid-row: 2;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 8px;
|
||||
color: #fff;
|
||||
|
||||
@include bp (sm) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
.text {
|
||||
line-height: 1.5;
|
||||
font-weight: 300;
|
||||
color: $color-secondary-light;
|
||||
}
|
||||
}
|
||||
|
||||
// Alternate content order
|
||||
&:nth-child(even) {
|
||||
:global(.image) {
|
||||
@include bp (sm) {
|
||||
grid-column: 2 / span 7;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
@include bp (sm) {
|
||||
grid-column: 11 / -2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** States
|
||||
*/
|
||||
// Is pinned
|
||||
&:global(.is-pinned) {
|
||||
.step__card {
|
||||
transform: scale(var(--scale)) translateZ(0);
|
||||
|
||||
&:before {
|
||||
opacity: var(--opacity-index);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -104,162 +104,44 @@
|
||||
|
||||
@include bp (sm) {
|
||||
grid-column: 4 / -4;
|
||||
margin-bottom: 120px;
|
||||
}
|
||||
|
||||
& > * {
|
||||
& > :global(*) {
|
||||
margin-top: var(--offset-top);
|
||||
margin-bottom: calc(-1 * var(--offset-top) + 8px);
|
||||
|
||||
@include bp (sm) {
|
||||
margin-bottom: 48px;
|
||||
margin-bottom: calc(-1 * var(--offset-top) * var(--scale) + 36px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Each Step
|
||||
.step {
|
||||
// Intention
|
||||
.intention {
|
||||
grid-column: 1 / -1;
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
padding: 56px 32px 32px;
|
||||
background: $color-primary-darker;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: min(45vw, 720px);
|
||||
margin-top: 20px;
|
||||
padding: 56px 32px;
|
||||
border-radius: 12px;
|
||||
transform-origin: top center;
|
||||
transition: transform 0.8s var(--ease-quart);
|
||||
background: $color-primary-darker;
|
||||
color: $color-tertiary;
|
||||
text-align: center;
|
||||
|
||||
@include bp (sm) {
|
||||
--columns: 18;
|
||||
display: grid;
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
padding: 5.5% 0;
|
||||
min-height: min(45vw, 720px);
|
||||
grid-column: 4 / -4;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
// Image
|
||||
:global(.image) {
|
||||
display: block;
|
||||
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%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
// Text
|
||||
&__text {
|
||||
@include bp (sm) {
|
||||
grid-column: 2 / span 7;
|
||||
grid-row: 2;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-bottom: 8px;
|
||||
color: #fff;
|
||||
|
||||
@include bp (sm) {
|
||||
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 {
|
||||
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;
|
||||
}
|
||||
&__content {
|
||||
width: clamp(250px, 75%, 562px);
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user