dev

assets/css/_partial/_image.scss

@@ -1,16 +1,28 @@
 .image_container {
-  max-height: 55vmin;
+  position: fixed;
-  position: absolute;
+  top: 0;
-  max-width: 100vw;
+  left: 0;
   opacity: 1;
   display: flex;
   align-items: center;
-  top: 0;
+  will-change: transform;
-  left: 0;
+  
+  img {
+    max-height: 55vmin;
+    max-width: 100vw;
+    height: auto;
+    width: auto;
+    object-fit: contain;
+  }
   
   &[data-status='t0'] {
     transition: all 0.5s ease-in-out 1.5s;
     max-height: calc(100vh - var(--footer-height));
+  
+    img {
+      transition: all 0.5s ease-in-out 2s;
+      max-height: calc(100vh - var(--footer-height));
+    }
   }
   
   &[data-status='t1'] {
@@ -34,8 +46,13 @@
   }
   
   &[data-status='r0'] {
-    max-height: 55vmin;
     transition: all 0.5s ease-in-out 1s;
+    opacity: 1;
+  
+    img {
+      transition: all 1s ease-in-out 0s;
+      max-height: 55vmin;
+    }
   }
   
   &[data-status='r1'] {
@@ -58,23 +75,36 @@
     opacity: 1;
   }
   
-  #layer5 {
+  &#layer5 {
     z-index: 5;
   }
   
-  #layer4 {
+  &#layer4 {
     z-index: 4;
   }
   
-  #layer3 {
+  &#layer3 {
     z-index: 3;
   }
   
-  #layer2 {
+  &#layer2 {
     z-index: 2;
   }
   
-  #layer1 {
+  &#layer1 {
     z-index: 1;
   }
 }
+
+.images {
+  
+  img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    object-fit: contain;
+    max-height: 55vmin;
+    max-width: 100vw;
+    transform-origin: center;
+  }
+}

assets/ts/desktop.ts

@@ -1,33 +1,31 @@
 import { overlayEnable } from './overlay'
 import {
-  styleCache,
-  FIFO,
-  layersStyleSet,
-  center,
   type position,
   createImgElement,
   calcImageIndex,
-  delay
+  delay,
+  mouseToTransform
 } from './utils'
 import { thresholdSensitivityArray, thresholdIndex } from './thresholdCtl'
 import { imgIndexSpanUpdate } from './indexDisp'
 import { imagesArrayLen, imagesArray } from './dataFetch'
 import { preloader } from './imageCache'
 
-// get layer divs
+const imagesDiv = document.getElementsByClassName('images').item(0) as HTMLDivElement
-export const layers: HTMLDivElement[] = [
+
-  document.getElementById('layer1') as HTMLDivElement,
+let imagesDivNodes: NodeListOf<HTMLImageElement>
-  document.getElementById('layer2') as HTMLDivElement,
+
-  document.getElementById('layer3') as HTMLDivElement,
+export const desktopImagesInit = (): void => {
-  document.getElementById('layer4') as HTMLDivElement,
+  for (let i = 0; i < imagesArrayLen; i++) {
-  document.getElementById('layer5') as HTMLDivElement
+    imagesDiv.appendChild(createImgElement(imagesArray[i]))
-]
+  }
+  imagesDivNodes = imagesDiv.childNodes as NodeListOf<HTMLImageElement>
+}
+
+export const trailingImageIndexes: number[] = []
 
 // layers position caching
-export const layersStyleArray: string[][] = [
+export const layersStyleArray: number[][] = [[], []]
-  ['0px', '0px', '0px', '0px', '0px'],
-  ['0px', '0px', '0px', '0px', '0px']
-]
 
 // global index for "activated"
 export let globalIndex: number = 0
@@ -35,13 +33,37 @@ export let globalIndex: number = 0
 // last position set as "activated"
 let last: position = { x: 0, y: 0 }
 
+let EnterOverlayController = new AbortController()
+
 // activate top image
-const activate = (index: number, x: number, y: number): void => {
+const activate = (index: number, mouseX: number, mouseY: number): void => {
-  const imgElem: HTMLImageElement = createImgElement(imagesArray[index])
+  EnterOverlayController.abort()
-  styleCache(x, y, layersStyleArray)
+  EnterOverlayController = new AbortController()
-  layersStyleSet(layersStyleArray, layers)
+  trailingImageIndexes.push(index)
-  FIFO(imgElem, layers)
+  let indexesNum: number = trailingImageIndexes.length
-  last = { x, y }
+  // push the tail index out and hide the image
+  if (indexesNum > 10) {
+    imagesDivNodes[trailingImageIndexes.shift() as number].style.display = 'none'
+    indexesNum = 10
+  }
+  // set img position
+  imagesDivNodes[index].style.transform = mouseToTransform(mouseX, mouseY, true, true)
+  // reset z index
+  for (let i = 0; i < indexesNum; i++) {
+    imagesDivNodes[trailingImageIndexes[i]].style.zIndex = `${i}`
+  }
+  imagesDivNodes[index].style.display = 'block'
+  imagesDivNodes[index].addEventListener(
+    'click',
+    () => {
+      void enterOverlay()
+    },
+    {
+      passive: true,
+      signal: EnterOverlayController.signal
+    }
+  )
+  last = { x: mouseX, y: mouseY }
 }
 
 // Compare the current mouse position with the last activated position
@@ -67,16 +89,10 @@ export const handleOnMove = (e: MouseEvent): void => {
 }
 
 async function enterOverlay(): Promise<void> {
-  layers[4].style.backgroundImage = ''
-  const topLayerImage = layers[4].lastElementChild as HTMLImageElement
-  topLayerImage.style.transition = ''
   // stop images animation
   window.removeEventListener('mousemove', handleOnMove)
   // set top image
-  center(layers[4])
+  alert('center')
-  for (let i = 4; i >= 0; i--) {
-    layers[i].dataset.status = `t${4 - i}`
-  }
   await delay(2500)
   // Offset previous self increment of global index (by handleOnMove)
   globalIndexDec()
@@ -86,16 +102,8 @@ async function enterOverlay(): Promise<void> {
 
 // initialization
 export const trackMouseInit = (): void => {
-  window.addEventListener('mousemove', handleOnMove)
+  desktopImagesInit()
-  layers[4].addEventListener(
+  window.addEventListener('mousemove', handleOnMove, { passive: true })
-    'click',
-    () => {
-      void enterOverlay()
-    },
-    {
-      passive: true
-    }
-  )
 }
 
 export const globalIndexDec = (): void => {

assets/ts/imageCache.ts

@@ -4,15 +4,5 @@ import { preloadImage, calcImageIndex } from './utils'
 let lastIndex: number = 0
 
 export const preloader = (index: number): void => {
-  if (lastIndex === index) {
-    for (let i: number = -2; i <= 1; i++)
-      preloadImage(imagesArray[calcImageIndex(index + i, imagesArrayLen)].url)
-  } else if (lastIndex > index) {
-    for (let i: number = 1; i <= 3; i++)
-      preloadImage(imagesArray[calcImageIndex(index - i, imagesArrayLen)].url)
-  } else {
-    for (let i: number = 1; i <= 3; i++)
-      preloadImage(imagesArray[calcImageIndex(index + i, imagesArrayLen)].url)
-  }
   lastIndex = index
 }

assets/ts/overlay.ts

@@ -1,20 +1,5 @@
-import {
+import { delay, calcImageIndex, mouseToTransform } from './utils'
-  delay,
+import { handleOnMove, globalIndex, globalIndexDec, globalIndexInc } from './desktop'
-  layersStyleSet,
-  center,
-  createImgElement,
-  calcImageIndex,
-  FIFO,
-  mouseToTransform
-} from './utils'
-import {
-  layersStyleArray,
-  layers,
-  handleOnMove,
-  globalIndex,
-  globalIndexDec,
-  globalIndexInc
-} from './desktop'
 import { imagesArray, imagesArrayLen } from './dataFetch'
 import { imgIndexSpanUpdate } from './indexDisp'
 
@@ -35,12 +20,7 @@ const setCursorText = (text: string): void => {
 const setTextPos = (e: MouseEvent): void => {
   // overlayCursor.style.left = `${e.clientX}px`
   // overlayCursor.style.top = `${e.clientY}px`
-  overlayCursor.style.transform = mouseToTransform(
+  overlayCursor.style.transform = mouseToTransform(e.clientX, e.clientY, false, true)
-    `${e.clientX}px`,
-    `${e.clientY}px`,
-    false,
-    true
-  )
 }
 
 // disable listeners
@@ -67,29 +47,19 @@ export const overlayDisable = (): void => {
 // handle close click
 async function handleCloseClick(): Promise<void> {
   overlayDisable()
-  layersStyleSet(layersStyleArray, layers)
-  for (let i: number = 4; i >= 0; i--) {
-    layers[i].dataset.status = `r${4 - i}`
-  }
   await delay(2500)
-  for (let i: number = 4; i >= 0; i--) {
-    layers[i].dataset.status = 'null'
-  }
-  layersStyleSet(layersStyleArray, layers)
   window.addEventListener('mousemove', handleOnMove)
 }
 
 const handlePrevClick = (): void => {
   globalIndexDec()
   const imgIndex = calcImageIndex(globalIndex, imagesArrayLen)
-  FIFO(createImgElement(imagesArray[imgIndex]), layers)
   imgIndexSpanUpdate(imgIndex + 1, imagesArrayLen)
 }
 
 const handleNextClick = (): void => {
   globalIndexInc()
   const imgIndex = calcImageIndex(globalIndex, imagesArrayLen)
-  FIFO(createImgElement(imagesArray[imgIndex]), layers)
   imgIndexSpanUpdate(imgIndex + 1, imagesArrayLen)
 }
 
@@ -139,7 +109,6 @@ export const vwRefreshInit = (): void => {
         r.style.setProperty('--footer-height', '31px')
       }
       // recenter image (only in overlay)
-      if (layers[4].dataset.status === 't0') center(layers[4])
     },
     { passive: true }
   )

assets/ts/thresholdCtl.ts

@@ -5,7 +5,7 @@ const thresholdDisp = document.getElementsByClassName('thid').item(0) as HTMLSpa
 
 // threshold data
 const threshold: number[] = [0, 40, 80, 120, 160, 200]
-export const thresholdSensitivityArray: number[] = [100, 40, 18, 14, 9, 5]
+export const thresholdSensitivityArray: number[] = [200, 40, 18, 14, 9, 5]
 export let thresholdIndex: number = 2
 
 // update inner text of threshold display element

assets/ts/utils.ts

@@ -18,57 +18,20 @@ export interface deviceType {
   desktop: boolean
 }
 
-// cache a xy position to array
-export const styleCache = (x: number, y: number, styleArray: string[][]): void => {
-  // pop element if length surpass limitation
-  styleArray[0].shift()
-  styleArray[1].shift()
-  // push new element
-  styleArray[0].push(`${x}px`)
-  styleArray[1].push(`${y}px`)
-}
-
 // 0 to 0001, 25 to 0025
 export const duper = (num: number): string => {
   return ('0000' + num.toString()).slice(-4)
 }
 
-// FIFO data array for image display
+export const mouseToTransform = (
-export const FIFO = (
+  x: number,
-  element: HTMLImageElement,
+  y: number,
-  layersArray: HTMLDivElement[]
+  centerCorrection: boolean = true,
-): void => {
+  accelerate: boolean = false
-  function layerProcess(layerL: HTMLDivElement, layerH: HTMLDivElement): void {
+): string => {
-    if (layerL.childElementCount !== 0)
+  return `translate${accelerate ? '3d' : ''}(${
-      layerL.removeChild(layerL.lastElementChild as HTMLImageElement)
+    centerCorrection ? `calc(${x}px - 50%)` : `${x}px`
-    if (layerH.childElementCount !== 0) {
+  }, ${centerCorrection ? `calc(${y}px - 50%)` : `${y}px`}${accelerate ? ', 0' : ''})`
-      const layerHNode = layerH.lastElementChild as HTMLImageElement
-      layerL.appendChild(layerHNode.cloneNode(true))
-    }
-  }
-  for (let i: number = 0; i <= 3; i++) {
-    layerProcess(layersArray[i], layersArray[i + 1])
-  }
-  if (layersArray[4].childElementCount !== 0)
-    layersArray[4].removeChild(layersArray[4].lastElementChild as HTMLImageElement)
-  layersArray[4].appendChild(element)
-}
-
-export const mouseToTransform = (x: string, y: string): string => {
-  return `translate(calc(${x} - 50%), calc(${y} - 50%))`
-}
-
-// set position for 5 image display layers
-export const layersStyleSet = (
-  styleArray: string[][],
-  layersArray: HTMLDivElement[]
-): void => {
-  function posSet(layer: HTMLDivElement, index: number): void {
-    layer.style.transform = mouseToTransform(styleArray[0][index], styleArray[1][index])
-  }
-  for (let i = 4; i >= 0; i--) {
-    posSet(layersArray[i], i)
-  }
 }
 
 // eslint-disable-next-line @typescript-eslint/promise-function-async
@@ -90,7 +53,7 @@ export const center = (e: HTMLDivElement): void => {
   } else {
     y = (window.innerHeight - 31) / 2 + 31
   }
-  e.style.transform = mouseToTransform(`${x}px`, `${y}px`)
+  e.style.transform = mouseToTransform(x, y)
 }
 
 export const createImgElement = (input: ImageData): HTMLImageElement => {
@@ -99,9 +62,7 @@ export const createImgElement = (input: ImageData): HTMLImageElement => {
   img.setAttribute('alt', '')
   img.setAttribute('height', input.imgH)
   img.setAttribute('width', input.imgW)
-  img.className = 'innerImg'
+  img.style.display = 'none'
-  img.style.background = `linear-gradient(15deg, ${input.pColor}, ${input.sColor})`
-  img.style.height = 'auto'
   return img
 }
 

layouts/index.html

@@ -24,11 +24,12 @@
       {{ if gt (len $colors) 1 }}
         {{ $sColor = index $colors 1 }}
       {{ end }}
+      {{ $resize := .Resize "x2000 webp Lanczos q70" }}
       {{ $.Scratch.Add "img" (dict
           "index" (string $index)
-          "url" (string .RelPermalink)
+          "url" (string $resize.RelPermalink)
-          "imgH" (string .Height)
+          "imgH" (string $resize.Height)
-          "imgW" (string .Width)
+          "imgW" (string $resize.Width)
           "pColor" (string $pColor)
           "sColor" (string $sColor)) }}
     {{ end }}

layouts/partials/desktop_wrapper.html

@@ -1,8 +1,4 @@
 <div class='desktopWrapper'>
   {{ partial "overlay.html" . }}
-  <div class="image_container" id="layer5" data-status="null"></div>
+  <div class='images'></div>
-  <div class="image_container" id="layer4" data-status="null"></div>
-  <div class="image_container" id="layer3" data-status="null"></div>
-  <div class="image_container" id="layer2" data-status="null"></div>
-  <div class="image_container" id="layer1" data-status="null"></div>
 </div>

package.json

@@ -7,8 +7,8 @@
     "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix",
     "build": "hugo -v --source=exampleSite --themesDir ../.. --gc",
     "build:preview": "hugo -v --source=exampleSite --themesDir ../.. -D --gc",
-    "server": "hugo server --source=exampleSite -D --disableFastRender --watch --verbose",
+    "server": "hugo server --source=exampleSite --gc -D --disableFastRender --watch --verbose",
-    "server:production": "hugo server --source=exampleSite --disableFastRender -e production --watch --verbose"
+    "server:production": "hugo server --source=exampleSite --gc --disableFastRender -e production --watch --verbose"
   },
   "repository": {
     "type": "git",