set the layer 0 as stack top

This commit is contained in:
Spedon
2023-03-21 12:00:22 +08:00
parent 7da5c2228a
commit 56fd85e875
4 changed files with 18 additions and 18 deletions

View File

@@ -79,11 +79,11 @@
} }
&#layer5 { &#layer5 {
z-index: 5; z-index: 1;
} }
&#layer4 { &#layer4 {
z-index: 4; z-index: 2;
} }
&#layer3 { &#layer3 {
@@ -91,10 +91,10 @@
} }
&#layer2 { &#layer2 {
z-index: 2; z-index: 4;
} }
&#layer1 { &#layer1 {
z-index: 1; z-index: 5;
} }
} }

View File

@@ -18,7 +18,7 @@ let topLayerPos: number[] = [0, 0]
// set top layer position // set top layer position
export const topLayerPosSet = (): void => { export const topLayerPosSet = (): void => {
layerPosSet(topLayerPos[0], topLayerPos[1], layers[4]) layerPosSet(topLayerPos[0], topLayerPos[1], layers[0])
} }
// global index for "activated" // global index for "activated"
@@ -62,9 +62,9 @@ async function enterOverlay(): Promise<void> {
// stop images animation // stop images animation
window.removeEventListener('mousemove', handleOnMove) window.removeEventListener('mousemove', handleOnMove)
// set top image // set top image
center(layers[4]) center(layers[0])
for (let i = 4; i >= 0; i--) { for (let i = 0; i <= 4; i++) {
layers[i].dataset.status = `t${4 - i}` layers[i].dataset.status = `t${i}`
} }
await delay(1600) await delay(1600)
// Offset previous self increment of global index (by handleOnMove) // Offset previous self increment of global index (by handleOnMove)
@@ -76,7 +76,7 @@ async function enterOverlay(): Promise<void> {
// initialization // initialization
export const trackMouseInit = (): void => { export const trackMouseInit = (): void => {
window.addEventListener('mousemove', handleOnMove) window.addEventListener('mousemove', handleOnMove)
layers[4].addEventListener( layers[0].addEventListener(
'click', 'click',
() => { () => {
void enterOverlay() void enterOverlay()

View File

@@ -52,11 +52,11 @@ export const overlayDisable = (): void => {
async function handleCloseClick(): Promise<void> { async function handleCloseClick(): Promise<void> {
overlayDisable() overlayDisable()
topLayerPosSet() topLayerPosSet()
for (let i: number = 4; i >= 0; i--) { for (let i: number = 0; i <= 4; i++) {
layers[i].dataset.status = `r${4 - i}` layers[i].dataset.status = `r${i}`
} }
await delay(1700) await delay(1700)
for (let i: number = 4; i >= 0; i--) { for (let i: number = 0; i <= 4; i++) {
layers[i].dataset.status = 'null' layers[i].dataset.status = 'null'
} }
window.addEventListener('mousemove', handleOnMove, { passive: true }) window.addEventListener('mousemove', handleOnMove, { passive: true })
@@ -122,7 +122,7 @@ export const vwRefreshInit = (): void => {
r.style.setProperty('--footer-height', '31px') r.style.setProperty('--footer-height', '31px')
} }
// recenter image (only in overlay) // recenter image (only in overlay)
if (layers[4].dataset.status === 't0') center(layers[4]) if (layers[0].dataset.status === 't0') center(layers[0])
}, },
{ passive: true } { passive: true }
) )

View File

@@ -38,12 +38,12 @@ export const FIFO = (
if (passPosition) layerL.style.transform = layerH.style.transform if (passPosition) layerL.style.transform = layerH.style.transform
} }
} }
for (let i: number = 0; i <= 3; i++) { for (let i: number = 4; i >= 1; i--) {
layerProcess(layersArray[i], layersArray[i + 1]) layerProcess(layersArray[i], layersArray[i - 1])
} }
if (layersArray[4].childElementCount !== 0) if (layersArray[0].childElementCount !== 0)
layersArray[4].removeChild(layersArray[4].lastElementChild as HTMLImageElement) layersArray[0].removeChild(layersArray[0].lastElementChild as HTMLImageElement)
layersArray[4].appendChild(element) layersArray[0].appendChild(element)
} }
export const mouseToTransform = ( export const mouseToTransform = (