From 65c9822b739b4c7099efee29f53d1d8be57b8595 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Tue, 21 Apr 2020 09:46:27 +0200 Subject: [PATCH] Globe: Add opacity option, Part globe WIP - Don't run the onScroll method on load, creates a funky translate otherwise - Bind window innerHeight via Svelte - Path scroll smoothing option value as prop --- src/globe/index.js | 24 ++++++++++------- src/molecules/InteractiveGlobe.svelte | 39 ++++++++++++++++----------- src/routes/credits.svelte | 2 +- src/routes/index.svelte | 6 +---- src/style/molecules/_globe.scss | 16 ++++++++++- src/style/pages/_page.scss | 8 ++++-- 6 files changed, 62 insertions(+), 33 deletions(-) diff --git a/src/globe/index.js b/src/globe/index.js index 6615ccb..8942c9a 100644 --- a/src/globe/index.js +++ b/src/globe/index.js @@ -31,8 +31,9 @@ class WebglGlobe { this.options = options this.options.autoRotationSpeed = this.options.autoRotationSpeed || 0 this.options.scrollSmoothing = this.options.scrollSmoothing || 0.5 // Smooth the globe position to avoid janks on scroll (lower == smoother) - this.options.cameraDistance = 1//this.options.cameraDistance || 1 // A multiplier to move camera backward or forward - + this.options.cameraDistance = 1 // this.options.cameraDistance || 1 // A multiplier to move camera backward or forward + this.options.opacity = this.options.opacity || 1 + this.cities = options.markers // List of cities with their options this._canUpdate = false this.hasUpdateCameraPos = false @@ -171,7 +172,7 @@ class WebglGlobe { el.style.pointerEvents = 'auto' el.setAttribute('href', '/location/' + markers[i].countrySlug + '/' + markers[i].slug) el.setAttribute('sapper-noscroll', '') - if (markers[i].className) el.classList.add( markers[i].className ) + if (markers[i].className) el.classList.add(markers[i].className) // Add label let span = document.createElement('span') @@ -193,6 +194,11 @@ class WebglGlobe { // Add class el.classList.add('marker') + // Add a class if opacity is below 1 + if (this.options.opacity < 1) { + el.classList.add('is-light') + } + // Callback on click el.addEventListener('click', () => { this.options.onLinkClicked && this.options.onLinkClicked() @@ -238,7 +244,7 @@ class WebglGlobe { this.options.cameraDistance = this.height / this.$el.clientHeight; // Remove retina on small screen (aka mobile) to boost perfs - this.renderer.setPixelRatio( window.innerWidth < 768 ? 1 : window.devicePixelRatio) + this.renderer.setPixelRatio(window.innerWidth < 768 ? 1 : window.devicePixelRatio) this.renderer.resize(this.width , this.height) // Update camera aspect ratio @@ -277,8 +283,8 @@ class WebglGlobe { // Destroy destroy() { this.disable()//stop render loop - document.body.removeChild( this.$markerWrapper ) - document.body.removeChild( this.renderer.canvas ) + document.body.removeChild(this.$markerWrapper ) + document.body.removeChild(this.renderer.canvas ) this.camera.delete()//to remove event listeners } @@ -287,12 +293,12 @@ class WebglGlobe { * This helps saving perfs and battery */ enable () { - this.renderer.canvas.style.opacity = 1 + this.renderer.canvas.style.opacity = this.options.opacity this.$markerWrapper.style.opacity = 1 this._canUpdate = true } - disable () { + disable () { this.renderer.canvas.style.opacity = 0 this.$markerWrapper.style.opacity = 0 this._canUpdate = false @@ -305,7 +311,7 @@ class WebglGlobe { } if (this.globeMesh.material.uniforms.uCameraOffsetY) { - this.globeMesh.material.uniforms.uCameraOffsetY.value += ( this.globeScrollOffset - this.globeMesh.material.uniforms.uCameraOffsetY.value ) * this.options.scrollSmoothing + this.globeMesh.material.uniforms.uCameraOffsetY.value += (this.globeScrollOffset - this.globeMesh.material.uniforms.uCameraOffsetY.value ) * this.options.scrollSmoothing } this.currMarkerScrollOffset += (this.markersScrollOffset - this.currMarkerScrollOffset) * this.options.scrollSmoothing diff --git a/src/molecules/InteractiveGlobe.svelte b/src/molecules/InteractiveGlobe.svelte index fed6ab1..0253738 100644 --- a/src/molecules/InteractiveGlobe.svelte +++ b/src/molecules/InteractiveGlobe.svelte @@ -7,11 +7,13 @@ import Lazy from 'svelte-lazy' // Props - export let type = '' - export let size = 0.575 + export let type = null export let autoRotate = true + export let scrollSmooth = 0.5 + export let opacity = 1 let scope let globe + let windowHeight let containerTop = 0 let containerHeight = 0 $: randomRotationPosition = getRandomArrayItem($continents.filter(continent => continent.countries)).rotation_position @@ -26,6 +28,13 @@ globe.update() } + // On scroll + const onScroll = () => { + let scrollDiff = (containerTop + windowHeight + (containerHeight - windowHeight) / 2) - document.documentElement.scrollTop + let scrollRatio = (1 - (scrollDiff / windowHeight)) * 2 + globe && globe.updateCameraPos(scrollRatio, scrollDiff - windowHeight) + } + // On resize const onResize = () => { if (scope) { @@ -34,13 +43,7 @@ } globe.resize() globe.update() - } - - // On scroll - const onScroll = () => { - let scrollDiff = (containerTop + window.innerHeight + (containerHeight - window.innerHeight) / 2) - document.documentElement.scrollTop - let scrollRatio = (1 - (scrollDiff / window.innerHeight)) * 2 - globe && globe.updateCameraPos(scrollRatio, scrollDiff - window.innerHeight) + onScroll() } @@ -58,7 +61,8 @@ //cameraDistance: size, // Smaller number == larger globe autoRotationSpeed: autoRotate ? -0.0025 : 0, rotationStart: randomRotationPosition, // In degrees - scrollSmoothing: 0.5, + scrollSmoothing: scrollSmooth, + opacity: opacity, texture: `/img/globe/map-${window.innerWidth > 1440 && window.devicePixelRatio > 1 ? '4k' : '2k'}.png`, markers: [ ...$locations.map(location => { return { @@ -71,13 +75,12 @@ className: location.close ? 'is-close' : '', } }) ], - onLinkClicked: () => { } + onLinkClicked: () => {} }) // Run the globe - onResize() update() - onScroll() + onResize() // Enable/Disable the globe when shown/hidden const globeScroll = ScrollOut({ @@ -96,6 +99,12 @@ }) - + -
\ No newline at end of file +{#if type === 'part'} +
+
+
+{:else} +
+{/if} \ No newline at end of file diff --git a/src/routes/credits.svelte b/src/routes/credits.svelte index c505da4..3370023 100644 --- a/src/routes/credits.svelte +++ b/src/routes/credits.svelte @@ -80,7 +80,7 @@ {#if process.browser} - + {/if} diff --git a/src/routes/index.svelte b/src/routes/index.svelte index 72538ce..6538147 100644 --- a/src/routes/index.svelte +++ b/src/routes/index.svelte @@ -120,11 +120,7 @@ {#if process.browser} - + {/if} diff --git a/src/style/molecules/_globe.scss b/src/style/molecules/_globe.scss index 766e77e..0fd5a6c 100644 --- a/src/style/molecules/_globe.scss +++ b/src/style/molecules/_globe.scss @@ -40,7 +40,6 @@ overflow: hidden; height: 30vw; min-height: 300px; - opacity: 0.5; } /* @@ -102,6 +101,7 @@ font-size: rem(8px); line-height: 1; text-transform: uppercase; + letter-spacing: 1px; @include breakpoint (sm) { font-size: rem(10px); @@ -123,6 +123,20 @@ } } + // Is light + &.is-light { + &.is-active { + .marker { + &__city { + color: #fff; + } + &__country { + color: #d2b7e4; + } + } + } + } + // Left positioned &.is-left { .marker { diff --git a/src/style/pages/_page.scss b/src/style/pages/_page.scss index a9c61aa..1fdffe5 100644 --- a/src/style/pages/_page.scss +++ b/src/style/pages/_page.scss @@ -92,7 +92,11 @@ } // Globe - // .globe { - // } + .globe--part { + margin-top: 72px; + @include breakpoint (sm) { + margin-top: 136px; + } + } }