WIP

src/routes/index.svelte

@@ -1,11 +1,27 @@
+<script context="module">
+	import { apiEndpoints } from '../store'
+
+	// Preload data
+	export async function preload (page, session) {
+        // Load random photos
+        const limit = 5
+		const req = await this.fetch(`${apiEndpoints.rest}/items/photos?fields=id,name,image.*,location.*,location.country.name&sort=?&limit=${limit}`)
+        const photos = await req.json()
+		if (req.status === 200) {
+			return { photos: photos.data }
+		}
+		this.error(404, 'Not found')
+	}
+</script>
+
 <script>
-    // Svelte
-    import { fade, slide } from 'svelte/transition'
+    import { onMount } from 'svelte'
     import { site, currentLocation } from '../store'
+    import * as fn from '../functions'
 
     // Dependencies
-    // import anime from 'animejs/lib/anime.es.js'
-    // import * as basicScroll from 'basicscroll'
+    import * as basicScroll from 'basicscroll'
+    import AOS from 'aos'
 
     // Components
     import Button from '../atoms/Button'
@@ -20,6 +36,50 @@
     $: if ($currentLocation) {
         currentLocation.set()
     }
+
+    // Props and variables
+    export let photos
+    let appearing
+
+
+    /*
+    ** Run code on browser only
+    */
+    onMount(() => {
+        // Scroll apparitions
+        if (process.browser) {
+            AOS.init()
+        }
+
+        // Parallax titles
+        const titleHouses = document.getElementById('title-houses')
+        const scrollTitleHouses = basicScroll.default.create({
+            elem: titleHouses,
+            direct: true,
+            from: '0',
+            to: window.innerHeight * 0.6,
+            props: {
+                '--translateX': {
+                    from: '-7vw',
+                    to: '-20vw'
+                }
+            }
+        }).start()
+
+        const titleWorld = document.getElementById('title-world')
+        const scrollTitleWorld = basicScroll.default.create({
+            elem: titleWorld,
+            direct: true,
+            from: document.querySelector('.explore__description').getBoundingClientRect().top,
+            to: document.querySelector('#title-world').getBoundingClientRect().bottom * 1.1,
+            props: {
+                '--translateX': {
+                    from: '-1vw',
+                    to: '-14vw'
+                }
+            }
+        }).start()
+    })
 </script>
 
 <svelte:head>
@@ -27,75 +87,47 @@
 </svelte:head>
 
 <section class="intro">
-    <h1 class="title-massive title-parallax">Houses</h1>
-    <!-- <MassiveTitle
-        text="Houses"
-        scrollFrom="0" scrollTo={window.innerHeight * 0.6}
-        effectFrom="-5vw" effectTo="-20vw"
-    /> -->
+    <div class="anim-mask">
+        <div class="anim title-parallax" id="title-houses" data-aos="letters-translate-top">
+            <h1 class="title-massive" aria-label="Houses">
+                {@html fn.lettersToSpan('Houses')}
+            </h1>
+        </div>
+    </div>
 
     <div class="wrap">
-        <div class="description">
+        <div class="intro__description style-description">
             <p>{$site.description}</p>
 
-            <Button href="/choose" type="button" text="Explore locations">
+            <Button href="#choose" type="a" className="button" text="Explore locations">
                 <IconGlobeSmall width="22" color="#666" />
             </Button>
         </div>
     </div>
 
-    <Carousel />
+    <Carousel {photos} />
 </section>
 
 <section class="explore explore--homepage">
-    <p class="of">of</p>
+    <div class="of" aria-label="of" data-aos="letters-translate-bottom">
+        <div class="anim-mask">
+            {@html fn.lettersToSpan('of')}
+        </div>
+    </div>
 
-    <div class="description">
-        <p>{$site.explore_list}</p>
+    <div class="explore__description style-description" id="choose">
+        <p>{$site.explore_globe}</p>
     </div>
 
     <InteractiveGlobe />
 
-    <!-- <MassiveTitle
-        text="World"
-        scrollFrom="0" scrollTo={window.innerHeight * 0.6}
-        effectFrom="-5vw" effectTo="-20vw"
-    /> -->
-    <h1 class="title-massive title-parallax">World</h1>
+    <div class="anim-mask anim-title">
+        <h1 class="title-massive title-parallax" id="title-world" aria-label="World" data-aos="letters-translate-bottom">
+            {@html fn.lettersToSpan('World')}
+        </h1>
+    </div>
 
     <Locations />
 </section>
 
 <Footer />
-
-<!-- <section class="hero is-medium is-danger has-text-centered">
-    <div class="hero-body">
-        <div class="container">
-            <h1 class="title">Houses Of</h1>
-            <h2 class="subtitle">{$site.description}</h2>
-        </div>
-    </div>
-</section>
-
-<div class="section">
-    <div class="container">
-        <h2 class="title is-4">Choose on globe</h2>
-
-        <IconGlobeSmall width="14" color="red" />
-        <IconGlobe />
-
-        <div class="content">
-            <p>{$site.explore_globe}</p>
-            <p>[globe]</p>
-        </div>
-
-        <h2 class="title is-4">Choose from list</h2>
-        <div class="content">
-            <p>{$site.explore_list}</p>
-        </div>
-
-        <Locations />
-    </div>
-</div>
-
-<!-- <Footer /> -->