mirror of
https://github.com/Sped0n/bridget.git
synced 2026-04-21 21:49:31 -07:00
set the layer 0 as stack top
This commit is contained in:
@@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -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()
|
||||||
|
|||||||
@@ -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 }
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -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 = (
|
||||||
|
|||||||
Reference in New Issue
Block a user