diff --git a/src/molecules/Photo.svelte b/src/molecules/Photo.svelte index 19c2d31..a8e0b41 100644 --- a/src/molecules/Photo.svelte +++ b/src/molecules/Photo.svelte @@ -11,64 +11,79 @@ import advancedFormat from 'dayjs/plugin/advancedFormat' dayjs.extend(advancedFormat) - // Props + // Props and variables export let index export let photo + export let layout = 'list' + let photoElement // Default size for the image const defaultWidth = 900 const defaultHeight = Math.ceil(defaultWidth / 1.5) - // Shortcut current location - let location - $: location = $currentLocation.location + // Reactive variables for location informations + $: location = $currentLocation + $: imgAlt = !!location ? `${photo.name}, ${location.region}, ${location.country.name}` : 'Loading…' + $: photoHref = !!location ? `/viewer/${location.country.slug}/${location.slug}/${photo.slug}` : '#' /* ** Run code on browser only */ onMount(() => { - // Parallax on photos - document.querySelectorAll('.photos .photo').forEach(photo => { - const parallaxNumber = basicScroll.default.create({ - elem: photo.querySelector('.photo__image--number'), - direct: true, - from: photo.getBoundingClientRect().top * 0.25, - to: photo.getBoundingClientRect().bottom * 0.92, - props: { - '--translate': { - from: '-75%', - to: '-25%' - } + // Parallax on photo when image has been loaded + const parallaxNumber = basicScroll.default.create({ + elem: photoElement.querySelector('.photo__image--number'), + direct: photoElement, + from: 'top-bottom', + to: 'bottom-top', + props: { + '--translate': { + from: '-75%', + to: '-25%' } - }) - parallaxNumber.start() + } }) + parallaxNumber.start() + parallaxNumber.calculate() + parallaxNumber.update() }) -
{location.region}, {location.country.name}
+{!!location && location.region}, {!!location && location.country.name}