diff --git a/src/routes/photos.svelte b/src/routes/photos.svelte index 9344710..da25ee5 100644 --- a/src/routes/photos.svelte +++ b/src/routes/photos.svelte @@ -7,6 +7,7 @@ import { quartOut } from 'svelte/easing' import dayjs from 'dayjs' import relativeTime from 'dayjs/plugin/relativeTime' + import { clamp, lerp } from '$utils/functions' // Components import Metas from '$components/Metas.svelte' import IconEarth from '$components/atoms/IconEarth.svelte' @@ -28,6 +29,7 @@ let buttonReset: HTMLElement let buttonShuffle: HTMLElement + let scrollY: number // Filters const urlFiltersParams = new URLSearchParams() @@ -38,7 +40,6 @@ $: filtered = filterCountry !== defaultCountry || filterSort !== defaultSort $: latestPhoto = photos[0] - // Pages related informations let currentPage: number = 1 let ended: boolean @@ -46,6 +47,14 @@ $: currentPhotosAmount = photos.length $: ended = currentPhotosAmount === totalPhotos + // Container margins + let scrollProgress: number + let sideMargins: number = 6 + $: if (browser && window.innerWidth >= 768) { + scrollProgress = clamp(scrollY / (window.innerHeight * 1.5), 0, 1) // TODO: Define this value to be 1 past 1.5 viewport + sideMargins = lerp(8, 30, scrollProgress) + } + /** * Define URL params @@ -152,6 +161,9 @@ image="" /> + + +

Houses

@@ -225,16 +237,16 @@ Reset {/if} -
-
+
{#if photos.length}
diff --git a/src/style/pages/_photos.scss b/src/style/pages/_photos.scss index 6c9fa9f..8fe808a 100644 --- a/src/style/pages/_photos.scss +++ b/src/style/pages/_photos.scss @@ -195,14 +195,36 @@ // Content Block &__content { - background-color: $color-tertiary; - // margin: 0 12px; + --corners: 8px; + position: relative; padding: 20px 0; - border-radius: 6px; + background-color: $color-tertiary; @include bp (sm) { + margin: 0 30px; padding: 64px 0; - border-radius: 8px; + } + + &:before, &:after { + content: ""; + display: block; + position: absolute; + z-index: -1; + top: 0; + width: 25%; + height: 100%; + background: $color-tertiary; + transition: transform 0.8s var(--ease-quart); + } + &:before { + border-radius: var(--corners) 0 0 var(--corners); + left: 0; + transform: translate3d(calc(-1 * var(--margin-sides)), 0, 0); + } + &:after { + border-radius: 0 var(--corners) var(--corners) 0; + right: 0; + transform: translate3d(var(--margin-sides), 0, 0); } } diff --git a/src/utils/functions.ts b/src/utils/functions.ts index 94f2aa8..fd2947f 100644 --- a/src/utils/functions.ts +++ b/src/utils/functions.ts @@ -1,3 +1,29 @@ +/** + * Throttle function + */ +export const throttle = (func: Function, timeout: number) => { + let ready: boolean = true + return (...args: any) => { + if (!ready) return + ready = false + func(...args) + setTimeout(() => ready = true, timeout) + } +} + + +/** + * Debounce function + */ +export const debounce = (func: Function, timeout: number) => { + let timer: NodeJS.Timeout + return (...args: any) => { + clearTimeout(timer) + timer = setTimeout(() => func(...args), timeout) + } +} + + /** * Linear Interpolation */ @@ -6,6 +32,15 @@ export const lerp = (start: number, end: number, amt: number): number => { } +/** + * Clamp a number + */ +export const clamp = (num: number, a: number, b: number) => { + return Math.max(Math.min(num, Math.max(a, b)), Math.min(a, b)) +} + + + /** * Return a random element from an array */