From efc51a65a89058dc540ce0b62e784b1e71aca865 Mon Sep 17 00:00:00 2001 From: nevsock Date: Wed, 15 Dec 2021 19:02:45 +0900 Subject: [PATCH 1/5] animation change --- index.html | 2 +- src/index.js | 18 ++++++-- src/style.scss | 109 ++++++++++++++++++++++++++++++++++++------------- 3 files changed, 96 insertions(+), 33 deletions(-) diff --git a/index.html b/index.html index d84f515..62a7580 100644 --- a/index.html +++ b/index.html @@ -14,7 +14,7 @@
{ const p = e.detail.totalProgress @@ -138,7 +147,8 @@ class FigniViewerElement extends ModelViewerElement { } }) progressBarHolder.appendChild(this.#progressBar) - loadingAnimationHolder.appendChild(loadingAnimationSpinner) + loadingAnimation.appendChild(cubes) + loadingAnimationHolder.appendChild(loadingAnimation) loadingAnimationHolder.appendChild(progressBarHolder) this.appendChild(loadingAnimationHolder) diff --git a/src/style.scss b/src/style.scss index e06be4f..3215189 100644 --- a/src/style.scss +++ b/src/style.scss @@ -356,49 +356,102 @@ figni-viewer * { transition: all 0.5s cubic-bezier(0, 1, 0.3, 1); } -.figni-viewer-loading-animation-spinner { - display: block; - width: 5rem; - height: 5rem; - margin-top: 3.5rem; +$w: 60px; +$h: 70px; +$xspace: $w/2; +$yspace: $h/4 - 1; +$speed: 2s; +$ease: cubic-bezier(0, 1, 0.3, 1); + +.figni-viewer-cubes { + position: absolute; +} + +.figni-viewer-loading-animation { + position: relative; + width: 150px; + height: 90px; margin-bottom: 3rem; - background-color: var(--figni-viewer-gray-300); - border-radius: 0.5rem; - -webkit-animation: sk-rotateplane 1.5s infinite cubic-bezier(0, 1, 0.3, 1); - animation: sk-rotateplane 1.5s infinite cubic-bezier(0, 1, 0.3, 1); } -@-webkit-keyframes sk-rotateplane { - 0% { - -webkit-transform: perspective(120px); - } +.figni-viewer-cube { + width: $w; + height: $h; + position: absolute; + transition: all ease-out .3s; +} - 50% { - -webkit-transform: perspective(120px) rotateY(180deg); - } +.figni-viewer-cube-svg { + fill: var(--figni-viewer-gray-500); +} - 100% { - -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg); - } +.figni-viewer-cube-window { + fill: var(--figni-viewer-gray-50); +} + +.figni-viewer-cube1 { + animation: cube1-animation $speed $ease infinite; +} +.figni-viewer-cube2 { + animation: cube2-animation $speed $ease infinite; +} +.figni-viewer-cube3 { + animation: cube3-animation $speed $ease infinite; + z-index: 2; +} +.figni-viewer-cube4 { + animation: cube4-animation $speed $ease infinite; +} +.figni-viewer-cube-svg-window { + fill: var(--figni-viewer-gray-50); } -@keyframes sk-rotateplane { + +@keyframes cube1-animation { 0% { - transform: perspective(120px) rotateX(0deg) rotateY(0deg); - -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); + /* compose logo *//* 1 on 3 *//* L-shape */ + transform: translate(0,0); + } 50% { + /* pre-box */ + transform: translate($xspace,-$yspace); + } 100% { + /* box *//* compose logo */ + transform: translate($xspace*2,0); } +} - 50% { - transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); - -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); +@keyframes cube2-animation { + 0%, 50% { + /* compose logo *//* 1 on 3 */ + transform: translate($xspace*2, 0px); + } 100% { + /* L-shape *//* box *//* compose logo */ + transform: translate($xspace*3, $yspace); } +} - 100% { - transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); - -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); +@keyframes cube3-animation { + 0% { + /* compose logo */ + transform: translate($xspace*3, $yspace); + } 50% { + /* 1 on 3 *//* L-shape *//* box */ + transform: translate($xspace*2, $yspace*2); + } 100% { + /* compose logo */ + transform: translate($xspace, $yspace); } } +@keyframes cube4-animation { + 0%, 50% { + /* compose logo *//* 1 on 3 *//* L-shape *//* box */ + transform: translate($xspace, $yspace); + } 100% { + /* compose logo */ + transform: translate(0, 0); + } +} .figni-viewer-loading-animation-hide { -webkit-animation: loading-animation-hide 0.5s ease-out; animation: loading-animation-hide 0.5s ease-out; From a49c4d5e590f25c9c077fb86aee4571f9322e47c Mon Sep 17 00:00:00 2001 From: nev Date: Thu, 16 Dec 2021 16:42:44 +0900 Subject: [PATCH 2/5] add loading text & min fix --- src/index.js | 8 ++++++-- src/style.scss | 44 +++++++++++++++++++++++++------------------- 2 files changed, 31 insertions(+), 21 deletions(-) diff --git a/src/index.js b/src/index.js index 7c654bc..eba7176 100644 --- a/src/index.js +++ b/src/index.js @@ -123,6 +123,7 @@ class FigniViewerElement extends ModelViewerElement { const cubes = document.createElement('div') const progressBarHolder = document.createElement('span') this.#progressBar = document.createElement('span') + const loadingText = document.createElement('span') for (let i = 0; i < 4; i++) { const cube = document.createElement('div') cube.innerHTML = SVG_LOADING_CUBE @@ -130,18 +131,20 @@ class FigniViewerElement extends ModelViewerElement { cube.classList.add(`figni-viewer-cube${i + 1}`) cubes.appendChild(cube) } + loadingText.innerText = 'LOADING' loadingAnimationHolder.setAttribute('slot', 'progress-bar') this.#progressBar.classList.add('figni-viewer-progress-bar') progressBarHolder.classList.add('figni-viewer-progress-bar-holder') cubes.classList.add('figni-viewer-cubes') loadingAnimation.classList.add('figni-viewer-loading-animation') + loadingText.classList.add('figni-viewer-loading-text') loadingAnimationHolder.classList.add('figni-viewer-loading-animation-holder') this.addEventListener('progress', (e) => { const p = e.detail.totalProgress this.#progressBar.style.setProperty('--progress-bar-width', `${Math.ceil(p * 100)}%`) if (p === 1) { loadingAnimationHolder.classList.add('figni-viewer-loading-animation-hide') - if (loadingAnimationHolder.style.opacity === 0) { + if (loadingAnimationHolder.style.opacity >= 0.01) { loadingAnimationHolder.style.display = 'none' } } @@ -150,6 +153,7 @@ class FigniViewerElement extends ModelViewerElement { loadingAnimation.appendChild(cubes) loadingAnimationHolder.appendChild(loadingAnimation) loadingAnimationHolder.appendChild(progressBarHolder) + loadingAnimationHolder.appendChild(loadingText) this.appendChild(loadingAnimationHolder) // 値の取得 @@ -598,7 +602,7 @@ class FigniViewerElement extends ModelViewerElement { if (panel.dataset.vertical == 'middle') { panel.style.maxHeight = `calc(${Number( window.getComputedStyle(this).height.slice(0, -2) - )}px - 4rem )` + )}px - 5rem )` } else { panel.style.maxHeight = `calc(${ Number(window.getComputedStyle(this).height.slice(0, -2)) / 2 diff --git a/src/style.scss b/src/style.scss index 3215189..7d5b16d 100644 --- a/src/style.scss +++ b/src/style.scss @@ -1,4 +1,4 @@ -@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Spartan:wght@700&display=swap'); :root { --figni-viewer-primary: rgb(255, 115, 59); @@ -14,6 +14,8 @@ --figni-viewer-link: rgb(59, 94, 255); --figni-viewer-button: rgb(59, 94, 255); --figni-viewer-button-tp: rgba(59, 94, 255, 0.8); + --figni-viewer-primary-font: 'Noto Sans JP', sans-serif; + --figni-viewer-secondary-font: 'Spartan', sans-serif; } figni-viewer { @@ -22,7 +24,7 @@ figni-viewer { } figni-viewer * { - font-family: 'Noto Sans JP', sans-serif; + font-family: var(--figni-viewer-primary-font); color: var(--figni-viewer-black); } @@ -343,7 +345,7 @@ figni-viewer * { max-width: 10rem; width: 100%; height: 0.5rem; - background-color: var(--figni-viewer-gray-100); + background-color: var(--figni-viewer-gray-300-tp); overflow: hidden; border-radius: 0.25rem; } @@ -356,8 +358,8 @@ figni-viewer * { transition: all 0.5s cubic-bezier(0, 1, 0.3, 1); } -$w: 60px; -$h: 70px; +$w: 40px; +$h: 46.6px; $xspace: $w/2; $yspace: $h/4 - 1; $speed: 2s; @@ -369,14 +371,28 @@ $ease: cubic-bezier(0, 1, 0.3, 1); .figni-viewer-loading-animation { position: relative; - width: 150px; - height: 90px; - margin-bottom: 3rem; + width: 100px; + height: 60px; + margin-bottom: 2rem; +} + +.figni-viewer-loading-text { + margin-top: 1.5rem; + color: var(--figni-viewer-gray-300); + font-family: var(--figni-viewer-secondary-font); + font-size: 0.75rem; + animation: loading-text-blinking 2s infinite ease-in-out; +} + +@keyframes loading-text-blinking { + 0% { opacity: 1; } + 50% { opacity: 0; } + 100% { opacity: 1; } } .figni-viewer-cube { width: $w; - height: $h; + height: $h;; position: absolute; transition: all ease-out .3s; } @@ -409,46 +425,36 @@ $ease: cubic-bezier(0, 1, 0.3, 1); @keyframes cube1-animation { 0% { - /* compose logo *//* 1 on 3 *//* L-shape */ transform: translate(0,0); } 50% { - /* pre-box */ transform: translate($xspace,-$yspace); } 100% { - /* box *//* compose logo */ transform: translate($xspace*2,0); } } @keyframes cube2-animation { 0%, 50% { - /* compose logo *//* 1 on 3 */ transform: translate($xspace*2, 0px); } 100% { - /* L-shape *//* box *//* compose logo */ transform: translate($xspace*3, $yspace); } } @keyframes cube3-animation { 0% { - /* compose logo */ transform: translate($xspace*3, $yspace); } 50% { - /* 1 on 3 *//* L-shape *//* box */ transform: translate($xspace*2, $yspace*2); } 100% { - /* compose logo */ transform: translate($xspace, $yspace); } } @keyframes cube4-animation { 0%, 50% { - /* compose logo *//* 1 on 3 *//* L-shape *//* box */ transform: translate($xspace, $yspace); } 100% { - /* compose logo */ transform: translate(0, 0); } } From 6f9c1eb2dfdc117281e37b312912487918efb805 Mon Sep 17 00:00:00 2001 From: nev Date: Thu, 16 Dec 2021 17:41:39 +0900 Subject: [PATCH 3/5] loading div fix --- src/index.js | 3 --- src/style.scss | 29 +++++------------------------ 2 files changed, 5 insertions(+), 27 deletions(-) diff --git a/src/index.js b/src/index.js index eba7176..7ef783b 100644 --- a/src/index.js +++ b/src/index.js @@ -144,9 +144,6 @@ class FigniViewerElement extends ModelViewerElement { this.#progressBar.style.setProperty('--progress-bar-width', `${Math.ceil(p * 100)}%`) if (p === 1) { loadingAnimationHolder.classList.add('figni-viewer-loading-animation-hide') - if (loadingAnimationHolder.style.opacity >= 0.01) { - loadingAnimationHolder.style.display = 'none' - } } }) progressBarHolder.appendChild(this.#progressBar) diff --git a/src/style.scss b/src/style.scss index 7d5b16d..e97a518 100644 --- a/src/style.scss +++ b/src/style.scss @@ -338,6 +338,7 @@ figni-viewer * { transform: translate(-50%, -50%); z-index: 9999; pointer-events: none; + transition: opacity 0.3s ease-out; } .figni-viewer-progress-bar-holder { @@ -373,6 +374,7 @@ $ease: cubic-bezier(0, 1, 0.3, 1); position: relative; width: 100px; height: 60px; + margin-top: 2rem; margin-bottom: 2rem; } @@ -459,27 +461,6 @@ $ease: cubic-bezier(0, 1, 0.3, 1); } } .figni-viewer-loading-animation-hide { - -webkit-animation: loading-animation-hide 0.5s ease-out; - animation: loading-animation-hide 0.5s ease-out; - animation-fill-mode: forwards; -} - -@-webkit-keyframes loading-animation-hide { - 0% { - opacity: 1; - } - - 100% { - opacity: 0; - } -} - -@keyframes loading-animation-hide { - 0% { - opacity: 1; - } - - 100% { - opacity: 0; - } -} + opacity: 0; + visibility: hidden !important; +} \ No newline at end of file From 8f24f96fecccca711dd6914ecc55b50456b79b11 Mon Sep 17 00:00:00 2001 From: nev Date: Thu, 16 Dec 2021 18:07:58 +0900 Subject: [PATCH 4/5] font fix --- index.html | 3 +++ src/style.scss | 9 +++++---- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 62a7580..1c5cb53 100644 --- a/index.html +++ b/index.html @@ -65,6 +65,7 @@ const view = document.getElementById('view')