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

🚧 Use PageTransition as a div and switch

Browse Source 
- use a page classed div for PageTransition which avoids to make global style for the page
- fix the loading spinner that was too short and would come and go before arriving on the page, now fades out when changing page as pageLoading is defined on the PageTransition afterUpdate
This commit is contained in:
Félix Péault
2022-10-09 14:44:25 +02:00
parent 8e6a38381f
commit fd37c36595
23 changed files with 1252 additions and 1246 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
src/routes/+page.svelte
View File

@@ -82,87 +82,89 @@
/>
<!-- image={getAssetUrlKey(settings.seo_image.id, 'share-image')} -->
<PageTransition name="homepage">
<section class="homepage__intro"
use:reveal={{
animation: { opacity: [0, 1] },
options: {
duration: 1,
},
}}
>
<ScrollingTitle
tag="h1"
class="title-houses"
label="Houses of the World"
offsetStart={-300}
offsetEnd={400}
<PageTransition>
<main class="homepage">
<section class="homepage__intro"
use:reveal={{
animation: { opacity: [0, 1] },
options: {
duration: 1,
},
}}
>
<SplitText text="Houses" mode="chars" />
</ScrollingTitle>
<ScrollingTitle
tag="h1"
class="title-houses"
label="Houses of the World"
offsetStart={-300}
offsetEnd={400}
>
<SplitText text="Houses" mode="chars" />
</ScrollingTitle>
<div class="homepage__headline">
<p class="text-medium">
{settings.description}
</p>
<div class="homepage__headline">
<p class="text-medium">
{settings.description}
</p>
<Button url="#locations" text="Explore locations" on:click={() => $smoothScroll.scrollTo('#locations', { duration: 2 })}>
<IconEarth animate={true} />
</Button>
<Button url="#locations" text="Explore locations" on:click={() => $smoothScroll.scrollTo('#locations', { duration: 2 })}>
<IconEarth animate={true} />
</Button>
</div>
</section>
<section class="homepage__photos">
<Collage {photos} />
</section>
<div class="homepage__ctas">
<DiscoverText />
<ListCTAs>
<li>
<BoxCTA
url="/photos"
icon="photos"
label="Browse all photos"
alt="Photos"
/>
</li>
<li>
<BoxCTA
url="/shop"
icon="bag"
label="Shop our products"
alt="Shopping bag"
/>
</li>
<li>
<BoxCTA
url="/about"
icon="compass"
label="Learn about the project"
alt="Compass"
/>
</li>
</ListCTAs>
</div>
</section>
<section class="homepage__photos">
<Collage {photos} />
</section>
<section class="homepage__locations" id="locations">
<InteractiveGlobe />
<div class="homepage__ctas">
<DiscoverText />
<ScrollingTitle tag="p" class="title-world mask">
<SplitText text="World" mode="chars" />
</ScrollingTitle>
<ListCTAs>
<li>
<BoxCTA
url="/photos"
icon="photos"
label="Browse all photos"
alt="Photos"
/>
</li>
<li>
<BoxCTA
url="/shop"
icon="bag"
label="Shop our products"
alt="Shopping bag"
/>
</li>
<li>
<BoxCTA
url="/about"
icon="compass"
label="Learn about the project"
alt="Compass"
/>
</li>
</ListCTAs>
</div>
<Locations {locations} />
</section>
<section class="homepage__locations" id="locations">
<InteractiveGlobe />
<ScrollingTitle tag="p" class="title-world mask">
<SplitText text="World" mode="chars" />
</ScrollingTitle>
<Locations {locations} />
</section>
<div class="grid-modules">
<div class="container grid">
<div class="wrap">
<ShopModule />
<NewsletterModule />
<div class="grid-modules">
<div class="container grid">
<div class="wrap">
<ShopModule />
<NewsletterModule />
</div>
</div>
</div>
</div>
</main>
</PageTransition>