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

✨ Rework About page Process section

Browse Source
This commit is contained in:
Félix Péault
2022-09-07 22:47:00 +02:00
parent 46a78851ec
commit 351061dc61
5 changed files with 148 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/routes/about/+page.svelte
View File

@@ -3,10 +3,10 @@
</style>
<script lang="ts">
import { navigating } from '$app/stores'
import { navigating, page } from '$app/stores'
import { onMount, afterUpdate } from 'svelte'
import type { PageData } from './$types'
import { scroll, animate, inView, type ScrollOptions, timeline } from 'motion'
import { scroll, animate, inView, timeline } from 'motion'
import { map } from '$utils/functions'
import { getAssetUrlKey } from '$utils/api'
import { DELAY } from '$utils/contants'
@@ -27,11 +27,12 @@
const { about, photos } = data
let scrollY: number, innerWidth: number, innerHeight: number
let purposeEl: HTMLElement, stepsEl: HTMLElement, photosGridEl: HTMLElement
let purposeEl: HTMLElement, photosGridEl: HTMLElement
let currentStep: number = 0
let photoFirstEl: HTMLElement, photoUsEl: HTMLElement
let videosObserver: IntersectionObserver
let photosGridOffset: number = photosGridEl && photosGridEl.offsetTop
$: currentStep = $page.url.hash ? Number($page.url.hash.split('#step-')[1]) - 1 : 0
$: 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]
@@ -282,37 +283,36 @@
<section class="about__process">
<div class="container grid">
<div class="title">
<h2 class="title-big">{about.process_title}</h2>
<p class="text-normal">{about.process_subtitle}</p>
</div>
<aside>
<div class="heading">
<h2 class="title-medium">{about.process_title}</h2>
<p class="text-normal">{about.process_subtitle}</p>
</div>
<div class="steps grid" bind:this={stepsEl}
style:--cards-amount={about.process_steps.length}
>
{#each about.process_steps as { title, text, image, video_mp4, video_webm }, index}
<ol>
{#each about.process_steps as { title }, index}
<li class:is-active={index === currentStep}>
<a href="#step-{index + 1}" class="title-big">
<span>{title}</span>
</a>
</li>
{/each}
</ol>
</aside>
<div class="steps">
{#each about.process_steps as { text, image, video_mp4, video_webm }, index}
<ProcessStep
{index} {title} {text}
{index} {text}
image={image ?? undefined}
video={video_mp4 && video_webm ? {
mp4: video_mp4.id,
webm: video_webm.id
} : undefined}
visible={index === currentStep}
/>
{/each}
</div>
<div class="intention">
<InteractiveGlobe2
enableMarkers={false}
speed={0.005}
pane={false}
width={200}
/>
<p class="intention__content title-medium">
{about.process_intention}
</p>
</div>
</div>
</section>
@@ -330,10 +330,9 @@
</div>
</section>
<div class="about__bottom container grid">
<section class="about__interest grid">
<section class="about__interest grid">
<div class="container grid">
<h2 class="title-xl">{about.contact_title}</h2>
<div class="blocks">
{#each about.contact_blocks as { title, text, link, button }}
<div class="block">
@@ -345,13 +344,6 @@
</div>
{/each}
</div>
</section>
<section class="grid-modules">
<div class="wrap">
<ShopModule />
<NewsletterModule />
</div>
</section>
</div>
</div>
</section>
</PageTransition>