From 494360521dc1f313d0ab89ad97fc76db3a0fdcaa Mon Sep 17 00:00:00 2001 From: andrea Date: Tue, 8 Oct 2019 15:39:02 +0200 Subject: [PATCH] screencast globe --- globe.js | 16 ++++++------ main.js | 80 ++++++++++++++++++++++++++++---------------------------- 2 files changed, 48 insertions(+), 48 deletions(-) diff --git a/globe.js b/globe.js index f92aadf..c8294b6 100644 --- a/globe.js +++ b/globe.js @@ -21,7 +21,7 @@ world = values[0]; countryMetadata = values[1]; setupMap(); - drawMap([{ 'key': 'IT' }, { 'key': 'IS' }, { 'key': 'AL' }, { 'key': 'AD' }, { 'key': 'AT' }, { 'key': 'BE' }, { 'key': 'BG' }, { 'key': 'BA' }, { 'key': 'BY' }, { 'key': 'CH' }, { 'key': 'CZ' }, { 'key': 'DE' }, { 'key': 'DK' }, { 'key': 'ES' }, { 'key': 'EE' }, { 'key': 'FI' }, { 'key': 'FR' }, { 'key': 'FO' }, { 'key': 'GB' }, { 'key': 'GG' }, { 'key': 'GR' }, { 'key': 'HR' }, { 'key': 'HU' }, { 'key': 'IM' }, { 'key': 'IE' }, { 'key': 'AX' }, { 'key': 'JE' }, { 'key': 'LI' }, { 'key': 'LT' }, { 'key': 'LU' }, { 'key': 'LV' }, { 'key': 'MC' }, { 'key': 'MD' }, { 'key': 'MK' }, { 'key': 'MT' }, { 'key': 'ME' }, { 'key': 'NL' }, { 'key': 'NO' }, { 'key': 'PL' }, { 'key': 'PT' }, { 'key': 'RO' }, { 'key': 'RU' }, { 'key': 'SM' }, { 'key': 'RS' }, { 'key': 'SK' }, { 'key': 'SI' }, { 'key': 'SE' }, { 'key': 'UA' }, { 'key': 'VA' }]); + drawMap([{ 'key' : 'US' }]); let globeObserver = enterView({ selector: '.globe__marker', @@ -149,11 +149,11 @@ case 'step1': if (isEntering) { document.querySelectorAll('.links path').forEach(function (el) { el.classList.remove('blurred') }); - drawMap([{ 'key': 'NL' }]); + drawMap([{ 'key': 'US' }]); // Paese 2 document.querySelector('.globe__text p.step1 em:first-child').classList.add('highlighted'); document.querySelector('.globe__text p.step1').classList.add('shown'); } else { - drawMap([{ 'key': 'IT' }, { 'key': 'IS' }, { 'key': 'AL' }, { 'key': 'AD' }, { 'key': 'AT' }, { 'key': 'BE' }, { 'key': 'BG' }, { 'key': 'BA' }, { 'key': 'BY' }, { 'key': 'CH' }, { 'key': 'CZ' }, { 'key': 'DE' }, { 'key': 'DK' }, { 'key': 'ES' }, { 'key': 'EE' }, { 'key': 'FI' }, { 'key': 'FR' }, { 'key': 'FO' }, { 'key': 'GB' }, { 'key': 'GG' }, { 'key': 'GR' }, { 'key': 'HR' }, { 'key': 'HU' }, { 'key': 'IM' }, { 'key': 'IE' }, { 'key': 'AX' }, { 'key': 'JE' }, { 'key': 'LI' }, { 'key': 'LT' }, { 'key': 'LU' }, { 'key': 'LV' }, { 'key': 'MC' }, { 'key': 'MD' }, { 'key': 'MK' }, { 'key': 'MT' }, { 'key': 'ME' }, { 'key': 'NL' }, { 'key': 'NO' }, { 'key': 'PL' }, { 'key': 'PT' }, { 'key': 'RO' }, { 'key': 'RU' }, { 'key': 'SM' }, { 'key': 'RS' }, { 'key': 'SK' }, { 'key': 'SI' }, { 'key': 'SE' }, { 'key': 'UA' }, { 'key': 'VA' }]); + drawMap([{ 'key': 'US' }]); // Paese 1 document.querySelector('.globe__text p.step1').classList.remove('shown'); document.querySelector('.globe__text.step1 p:first-child em').classList.add('highlighted'); window.clearTimeout(timeout); @@ -165,11 +165,11 @@ case 'step2': if (isEntering) { - drawMap([{ 'key': 'LU' }]); + drawMap([{ 'key': 'MU' }]); // Paese 3 document.querySelector('.globe__text span.step2 em').classList.add('highlighted'); document.querySelector('.globe__text span.step2').classList.add('shown'); } else { - drawMap([{ 'key': 'NL' }]); + drawMap([{ 'key': 'MU' }]); // Paese 2 document.querySelector('.globe__text p.step1 em:first-child').classList.add('highlighted'); document.querySelector('.globe__text span.step2').classList.remove('shown'); } @@ -177,12 +177,12 @@ case 'step3': if (isEntering) { - drawMap([{ 'key': 'KY' }]); + drawMap([{ 'key': 'IN' }]); document.querySelector('.globe__text em.step3').classList.add('highlighted'); document.querySelector('.globe__text.step1').classList.remove('shown'); document.querySelector('.globe__text.step3').classList.add('shown'); } else { - drawMap([{ 'key': 'LU' }]); + drawMap([{ 'key': 'IN' }]); document.querySelector('.globe__text span.step2 em').classList.add('highlighted'); document.querySelector('.globe__text.step3').classList.remove('shown'); document.querySelector('.globe__text.step1').classList.add('shown'); @@ -218,4 +218,4 @@ } } -})(); \ No newline at end of file +})(); diff --git a/main.js b/main.js index a6e047b..769a304 100644 --- a/main.js +++ b/main.js @@ -31,43 +31,43 @@ })(); // code credits to Pawel Grzybek: https://pawelgrzybek.com/page-scroll-in-vanilla-javascript/ -function scrollIt(destination, duration, callback) { - - const start = window.pageYOffset; - const startTime = 'now' in window.performance ? performance.now() : new Date().getTime(); - - const documentHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight); - const windowHeight = window.innerHeight || document.documentElement.clientHeight || document.getElementsByTagName('body')[0].clientHeight; - const destinationOffset = typeof destination === 'number' ? destination : destination.offsetTop; - const destinationOffsetToScroll = Math.round(documentHeight - destinationOffset < windowHeight ? documentHeight - windowHeight : destinationOffset); - - if ('requestAnimationFrame' in window === false) { - window.scroll(0, destinationOffsetToScroll); - if (callback) { - callback(); - } - return; - } - - function scroll() { - const now = 'now' in window.performance ? performance.now() : new Date().getTime(); - const time = Math.min(1, ((now - startTime) / duration)); - const timeFunction = easeOutQuart(time); - window.scroll(0, Math.ceil((timeFunction * (destinationOffsetToScroll - start)) + start)); - - if (window.pageYOffset === destinationOffsetToScroll) { - if (callback) { - callback(); - } - return; - } - - requestAnimationFrame(scroll); - } - - function easeOutQuart(t) { - return 1 - (--t) * t * t * t; - } - - scroll(); -} +// function scrollIt(destination, duration, callback) { +// +// const start = window.pageYOffset; +// const startTime = 'now' in window.performance ? performance.now() : new Date().getTime(); +// +// const documentHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight); +// const windowHeight = window.innerHeight || document.documentElement.clientHeight || document.getElementsByTagName('body')[0].clientHeight; +// const destinationOffset = typeof destination === 'number' ? destination : destination.offsetTop; +// const destinationOffsetToScroll = Math.round(documentHeight - destinationOffset < windowHeight ? documentHeight - windowHeight : destinationOffset); +// +// if ('requestAnimationFrame' in window === false) { +// window.scroll(0, destinationOffsetToScroll); +// if (callback) { +// callback(); +// } +// return; +// } +// +// function scroll() { +// const now = 'now' in window.performance ? performance.now() : new Date().getTime(); +// const time = Math.min(1, ((now - startTime) / duration)); +// const timeFunction = easeOutQuart(time); +// window.scroll(0, Math.ceil((timeFunction * (destinationOffsetToScroll - start)) + start)); +// +// if (window.pageYOffset === destinationOffsetToScroll) { +// if (callback) { +// callback(); +// } +// return; +// } +// +// requestAnimationFrame(scroll); +// } +// +// function easeOutQuart(t) { +// return 1 - (--t) * t * t * t; +// } +// +// scroll(); +// }