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

Credits: Add temporary globe at bottom

Browse Source
This commit is contained in:
Félix Péault
2020-02-29 10:47:01 +01:00
parent 631a3e6ccb
commit 4d8493e407
3 changed files with 39 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/molecules/InteractiveGlobe.svelte
View File

@@ -1,11 +1,32 @@
<script> <script>
export let type
// Lead 1: https://codepen.io/edankwan/pen/emqgpr // Lead 1: https://codepen.io/edankwan/pen/emqgpr
// Lead 2: ThreeJS globe: https://github.com/vasturiano/globe.gl // Lead 2: ThreeJS globe: https://github.com/vasturiano/globe.gl
// Lead 3: https://www.bypeople.com/css-js-webgl-rotating-3d-globe-effect/ // Lead 3: https://www.bypeople.com/css-js-webgl-rotating-3d-globe-effect/
</script> </script>
<div class="globe"> <div class="globe" class:globe--part={type === 'part'}>
<div class="wrap"> <div class="wrap">
<div class="pin-place">
<a href="/location/australia/brisbane" rel="prefetch" class="pinplace__name">
<span>Brisbane</span>
</a>
<a href="/location/australia/brisbane" rel="prefetch" class="">
<i class="pin-place__dot"></i>
</a>
</div>
<div class="pin-place">
<a href="/location/australia/brisbane" rel="prefetch" class="pinplace__name">
<span>Montpellier</span>
</a>
<a href="/location/australia/brisbane" rel="prefetch" class="">
<i class="pin-place__dot"></i>
</a>
</div>
<span class="pin-country">France</span>
<img src="/img/globe.png" alt=""> <img src="/img/globe.png" alt="">
</div> </div>
</div> </div>

3
src/routes/credits.svelte
View File

@@ -9,6 +9,7 @@
import IconArrow from '../atoms/IconArrow' import IconArrow from '../atoms/IconArrow'
import TitleSite from '../atoms/TitleSite' import TitleSite from '../atoms/TitleSite'
import LinkTranslate from '../atoms/LinkTranslate' import LinkTranslate from '../atoms/LinkTranslate'
import InteractiveGlobe from '../molecules/InteractiveGlobe'
import Footer from '../molecules/Footer' import Footer from '../molecules/Footer'
// Categories // Categories
@@ -64,6 +65,8 @@
</div> </div>
{/each} {/each}
</div> </div>
<InteractiveGlobe type="part" />
</div> </div>
<Footer /> <Footer />

16
src/style/molecules/_globe.scss
View File

@@ -11,7 +11,19 @@
// Image (for now) // Image (for now)
img { img {
display: block; display: inline-block;
width: 100%; margin: 0 auto;
pointer-events: none;
user-select: none;
} }
} }
// Pin
// Part globe
.globe--part {
overflow: hidden;
height: 30vw;
min-height: 300px;
opacity: 0.5;
}