base(target="_blank")
#elBackdrop
ul.imgs
  li
    a(href="https://unsplash.com/photos/lBPtkH1Sel4")
      img(src="https://images.unsplash.com/photo-1533975197976-d29f912001f4?ixlib=rb-0.3.5&s=02e98f585a01690f94ffe4201ea03b73&auto=format&fit=crop&w=500&q=60")
  li
    a(href="https://unsplash.com/photos/6U5AEmQIajg")
      img(src="https://images.unsplash.com/photo-1513759565286-20e9c5fad06b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=30baad7b9baa881f90b4f07941c2afe3&dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb")
  li 
    a(href="https://unsplash.com/photos/sEVEPNKYNAk")
      img(src="https://images.unsplash.com/photo-1531632584752-b8f7bda3799d?ixlib=rb-0.3.5&s=ffc25983fe9d563342ffcd8ca31faf08&dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb")
  li
    a(href="https://unsplash.com/photos/zjGa2RQphRA")
      img(src="https://images.unsplash.com/photo-1523780329224-c3be49f59edd?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=19df24a90c47626bcff80ac85dfafbac&dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb")
  li
    a(href="https://unsplash.com/photos/9rloii_qmmw")
      img(src="https://images.unsplash.com/photo-1470165473874-023613603389?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=84f531a72a7d925a672a94c5fff1946f&auto=format&fit=crop&w=500&q=60")

body {
  overflow:hidden;
}

#elBackdrop {
  --sz:20px;/*blur size*/
  width:calc(100vw + 4 * var(--sz));/*2sz ..100vw .. 2sz*/
  height:calc(100vh + 4 * var(--sz));
  position:fixed; z-index:-1; 
  left:calc(-1 * var(--sz) * 2); 
  top:calc(-1 * var(--sz) * 2);
  filter:blur(var(--sz))grayscale(0.5)brightness(1.6);
  background-repeat:no-repeat;
  background-size:100% 100%;
}

.imgs {
  width:100vw;
  height:100vh;
  display:flex;
  position:absolute; z-index:0;
}

li {
  flex:0 0 33.33%;
  
  display:flex;
  justify-content:center;
  align-items:center;
}


li img {
  width:50%;
  height:50%;
  object-fit:contain;
  opacity:0.3;
  transition:all 1s;
  filter:drop-shadow(0 0 3px hsla(0,0%,0%,0.5));
}


li.focus img {
  width:80%;
  height:80%;
  opacity:1;
  filter:
    drop-shadow(0 0 5px hsla(0,0%,0%,0.9))
    drop-shadow(0 0 100px hsla(0,0%,100%,0.7));
}


li.focus:hover img {
  filter:
    drop-shadow(0 0 1px hsla(0,0%,0%,1))
    drop-shadow(0 0 30px powderblue);
}


li > a {
  width:100%;
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  pointer-events:none;
}
li.focus:hover > a {
  pointer-events:auto;
}

const imgs = document.querySelector(".imgs");
const LIs = Array.from(document.querySelectorAll(".imgs li"));

imgs.insertBefore(document.createElement("li"), imgs.firstChild);
imgs.appendChild(document.createElement("li"));

window.addEventListener("scroll", e => {
  const mid = innerWidth/2;
  for (const LI of LIs) {
    const {left, right} = LI.getBoundingClientRect();
    if (left < mid && right > mid) focusEl(LI);
    else blurEl(LI);
  }
});

function focusEl(li) {
  const img = li.querySelector("img");
  //img.classList.toggle("focus", true);
  li.classList.toggle("focus", true);
  elBackdrop.style.backgroundImage = `url(${img.src})`;
}

function blurEl(li) {
  //const img = li.querySelector("img");
  //img.classList.toggle("focus", false);
  li.classList.toggle("focus", false);
}


focusEl(LIs[0]);//force focus on first <li>
const SPF = 0.88;//sec per frame
const interval = 1000/(1/SPF);//setimtout interval
let timer = null;//autoplay timer

document.body.addEventListener("wheel", e => {
  clearInterval(timer);//stop autoplay timer immd.
  e.preventDefault();//reject regular scroll behv 
  scrollTo(scrollX + Math.sign(e.deltaY) * innerWidth/3, 0);//offset 1 <li> base on wheel dir
});

let i = 0;
timer = setTimeout(function f() {
  scrollTo(scrollX + innerWidth/3, 0);//offset 1 <li> to the right
  if (i++ == LIs.length) 
    clearInterval(timer);
  else 
    timer = setTimeout(f, interval);
}, interval);