add expand top image function

assets/css/_partial/_image.scss

@@ -1,10 +1,10 @@
 .image {
-  height: 55vmin;
+  max-height: 55vmin;
   position: absolute;
   transform: translate(-50%, -50%);
   
   img {
-    height: 55vmin;
+    max-height: 55vmin;
     width: auto;
   }
 }
@@ -19,6 +19,21 @@
   transition: opacity 0ms ease-in-out;
 }
 
+.top {
+  transition: all 0.5s ease-in-out 1.5s;
+  max-height: calc(100vh - var(--footer-height));
+  display: flex;
+  align-items: center;
+  width: auto;
+  
+  img {
+    transition: all 0.5s ease-in-out 2s;
+    max-height: calc(100vh - var(--footer-height));
+    width: auto;
+    max-width: 100vw;
+  }
+}
+
 .trailingImage1 {
   transition: opacity 0.5s ease-in-out 1s;
   opacity: 0;

assets/js/theme.js

@@ -24,6 +24,15 @@ function thresholdUpdate () {
   thresholdNum.item(0).innerText = duper(threshold[thresholdIndex])
 }
 
+function footerHeightUpdate () {
+  const r = document.querySelector(':root')
+  if (window.innerWidth > 768) {
+    r.style.setProperty('--footer-height', '38px')
+  } else {
+    r.style.setProperty('--footer-height', '31px')
+  }
+}
+
 // footer index number display module
 const footerIndex = document.getElementsByClassName('ftid')
 const numSpan = (numOne, numTwo) => {
@@ -42,6 +51,7 @@ const numSpan = (numOne, numTwo) => {
 function init () {
   numSpan(0, featuredPicNum)
   thresholdUpdate()
+  footerHeightUpdate()
   document.getElementById('thresholdDec').addEventListener('click', function () {
     if (thresholdIndex > 0) {
       thresholdIndex--
@@ -57,6 +67,15 @@ function init () {
   }, { passive: true })
 }
 
+const center = e => {
+  e.style.left = '50%'
+  if (window.innerWidth > 768) {
+    e.style.top = 'calc((100% - 38px) / 2)'
+  } else {
+    e.style.top = 'calc((100% - 31px) / 2 + 31px)'
+  }
+}
+
 // let specified image show
 const activate = (image, x, y) => {
   for (const node of document.getElementsByClassName('top')) {
@@ -72,16 +91,20 @@ const activate = (image, x, y) => {
   // activate image
   image.classList.remove('inactive')
   image.classList.add('active')
+  image.addEventListener('click', () => {
+    window.removeEventListener('mousemove', handleOnMove)
     // set top image
     image.classList.add('top')
-  image.addEventListener('click', () => {
-    image.style.left = '50%'
-    image.style.top = '50%'
+    center(image)
+    // set tailing images
     const activeImages = document.getElementsByClassName('active')
     const activeImagesCount = activeImages.length
     for (let i = activeImagesCount; i > 1; i--) {
       activeImages.item(i - 2).classList.add(`trailingImage${(activeImagesCount - 1) - (i - 2)}`)
     }
+  }, {
+    passive: true,
+    once: true
   })
 
   last = { x, y }
@@ -114,6 +137,11 @@ const handleOnMove = e => {
 
 init()
 
-window.onmousemove = e => handleOnMove(e)
-
-window.ontouchmove = e => handleOnMove(e.touches[0])
+window.addEventListener('mousemove', handleOnMove)
+window.addEventListener('resize', () => {
+  const isTop = document.getElementsByClassName('top')
+  if (isTop.length) {
+    center(isTop.item(0))
+  }
+  footerHeightUpdate()
+})