✨ Rework About page Process section
This commit is contained in:
25
src/animations/transitions.ts
Normal file
25
src/animations/transitions.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
import { animate } from 'motion'
|
||||
import { quartOut } from './easings'
|
||||
|
||||
export const scaleFade = (node: HTMLElement, {
|
||||
delay = 0,
|
||||
duration = 1,
|
||||
scale = [0.7, 1],
|
||||
opacity = [1, 0],
|
||||
x = null,
|
||||
}) => {
|
||||
return {
|
||||
css: () => {
|
||||
animate(node, {
|
||||
scale,
|
||||
opacity,
|
||||
x,
|
||||
z: 0,
|
||||
}, {
|
||||
easing: quartOut,
|
||||
duration,
|
||||
delay,
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -3,53 +3,60 @@
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
import { scaleFade } from '$animations/transitions'
|
||||
|
||||
// Components
|
||||
import Image from '$components/atoms/Image.svelte'
|
||||
import { getAssetUrlKey } from '$utils/api'
|
||||
|
||||
export let index: number
|
||||
export let title: string
|
||||
export let text: string
|
||||
export let image: any = undefined
|
||||
export let video: any = undefined
|
||||
export let visible: boolean = false
|
||||
|
||||
let videoEl: HTMLVideoElement
|
||||
|
||||
const imageRatio = image ? image.width / image.height : undefined
|
||||
|
||||
// Toggle video playback if step is visible
|
||||
$: if (videoEl) {
|
||||
visible ? videoEl.play() : videoEl.pause()
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="step" style:--index={index}>
|
||||
<div class="step__card grid">
|
||||
{#if image || video}
|
||||
<div class="media">
|
||||
{#if image}
|
||||
<Image
|
||||
class="image shadow-box-dark"
|
||||
id={image.id}
|
||||
sizeKey="product"
|
||||
sizes={{
|
||||
small: { width: 400 },
|
||||
medium: { width: 600 },
|
||||
large: { width: 800 },
|
||||
}}
|
||||
ratio={imageRatio}
|
||||
alt={image.title}
|
||||
/>
|
||||
{:else if video}
|
||||
<video muted loop playsinline allow="autoplay">
|
||||
<source type="video/mp4" src={getAssetUrlKey(video.mp4, 'step')} />
|
||||
<source type="video/webm" src={getAssetUrlKey(video.webm, 'step')} />
|
||||
<track kind="captions" />
|
||||
</video>
|
||||
{/if}
|
||||
</div>
|
||||
{#if visible}
|
||||
<div class="step grid" style:--index={index}
|
||||
in:scaleFade|local={{ scale: [1.1, 1], opacity: [0, 1], x: [20, 0], delay: 0.2 }}
|
||||
out:scaleFade|local={{ scale: [1, 0.9], opacity: [1, 0], x: [0, -20] }}
|
||||
>
|
||||
{#if image || video}
|
||||
<div class="media">
|
||||
{#if image}
|
||||
<Image
|
||||
class="image shadow-box-dark"
|
||||
id={image.id}
|
||||
sizeKey="product"
|
||||
sizes={{
|
||||
small: { width: 400 },
|
||||
medium: { width: 600 },
|
||||
large: { width: 800 },
|
||||
}}
|
||||
ratio={imageRatio}
|
||||
alt={image.title}
|
||||
/>
|
||||
{:else if video}
|
||||
<video muted loop playsinline autoplay allow="autoplay" bind:this={videoEl}>
|
||||
<source type="video/mp4" src={getAssetUrlKey(video.mp4, 'step')} />
|
||||
<source type="video/webm" src={getAssetUrlKey(video.webm, 'step')} />
|
||||
<track kind="captions" />
|
||||
</video>
|
||||
{/if}
|
||||
|
||||
<div class="content">
|
||||
<h3 class="title-medium">{title}</h3>
|
||||
<div class="text text-small">
|
||||
{@html text}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overlay" />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="text text-small">
|
||||
{@html text}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
@@ -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>
|
||||
@@ -1,23 +1,20 @@
|
||||
// About page Step
|
||||
.step {
|
||||
// Card
|
||||
&__card {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
padding: 56px 32px 32px;
|
||||
background: $color-primary-darker;
|
||||
border-radius: 12px;
|
||||
transform: translateZ(0);
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
padding: 56px 32px 32px;
|
||||
background: $color-primary-darker;
|
||||
border-radius: 12px;
|
||||
transform: translateZ(0);
|
||||
|
||||
@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;
|
||||
}
|
||||
@include bp (sm) {
|
||||
--columns: 11;
|
||||
display: grid;
|
||||
grid-template-rows: repeat(2, 1fr);
|
||||
padding: 8% 0;
|
||||
min-height: clamp(400px, 75vh, 800px);
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
// Image
|
||||
@@ -27,87 +24,36 @@
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
width: 70%;
|
||||
max-height: 580px;
|
||||
margin: 0 auto 64px;
|
||||
max-height: 550px;
|
||||
margin-bottom: 48px;
|
||||
border-radius: 6px;
|
||||
|
||||
@include bp (sm) {
|
||||
grid-column: 11 / -2;
|
||||
grid-column: 2 / span 6;
|
||||
grid-row: 1 / -1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-bottom: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
video, :global(.image) {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
:global(.image) {
|
||||
:global(img) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
}
|
||||
:global(.image img), video {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
// Content
|
||||
.content {
|
||||
.text {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
@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
|
||||
.overlay {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
// Alternate content order
|
||||
&:nth-child(even) {
|
||||
.media {
|
||||
@include bp (sm) {
|
||||
grid-column: 2 / span 7;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
@include bp (sm) {
|
||||
grid-column: 11 / -2;
|
||||
}
|
||||
}
|
||||
line-height: 1.5;
|
||||
font-weight: 300;
|
||||
color: $color-secondary-light;
|
||||
grid-column: 2 / -2;
|
||||
}
|
||||
}
|
||||
@@ -356,10 +356,10 @@
|
||||
&__photos {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-top: -64px;
|
||||
// margin-top: -64px;
|
||||
|
||||
@include bp (sm) {
|
||||
margin-top: -120px;
|
||||
// margin-top: -120px;
|
||||
}
|
||||
|
||||
.container-wide {
|
||||
@@ -434,41 +434,27 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Bottom
|
||||
*/
|
||||
&__bottom {
|
||||
@include bp (sm) {
|
||||
margin-top: calc(-1 * clamp(160px, 14vw, 240px));
|
||||
}
|
||||
|
||||
// Modules
|
||||
.grid-modules {
|
||||
grid-column: 1 / -1;
|
||||
|
||||
@include bp (sm) {
|
||||
grid-column: 2 / -2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Interest
|
||||
&__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);
|
||||
margin-top: calc(-1 * clamp(160px, 14vw, 256px));
|
||||
|
||||
@include bp (sm) {
|
||||
display: grid;
|
||||
grid-column: 2 / -2;
|
||||
margin-bottom: 48px;
|
||||
padding: clamp(72px, 8vw, 160px) 0;
|
||||
& > .container {
|
||||
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) {
|
||||
--columns: 22;
|
||||
display: grid;
|
||||
grid-column: 2 / -2;
|
||||
margin-bottom: 64px;
|
||||
padding: clamp(72px, 8vw, 160px) 0;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
|
||||
Reference in New Issue
Block a user