图片库导航

下载代码

html

css

分享到微信朋友圈

html

css

@property --r {
  syntax: "<length-percentage>";
  initial-value: 0%;
  inherits: false;
}
* {
  margin: 0;
}

html, body, figure {
  display: grid;
}

html {
  height: 100%;
}

html:not(.js) {
  --js: 0 ;
}

body {
  overflow: var(--js, hidden);
  background: #333;
}

svg {
  position: absolute;
}

.gallery {
  display: flex;
  align-self: center;
  margin-left: calc(var(--js, 1)*50vw);
  transform: translate(var(--o));
  transition: transform 0.3s;
}

figure {
  --dif: calc(var(--i) - var(--k));
  --sgn: clamp(-1, var(--dif), 1);
  --bit: max(-1*var(--sgn), var(--sgn));
  --not-bit: calc(1 - var(--bit));
  --not-sel: min(1, max(-1*var(--dif), var(--dif)));
  --sel: calc(1 - var(--not-sel));
  --hl: 0;
  --not-hl: calc(1 - var(--hl));
  isolation: isolate;
  clip-path: inset(1px);
}
figure::before, figure::after {
  grid-area: 1/1;
  pointer-events: none;
  content: "";
}
figure::before {
  --r: calc(var(--not-sel)*var(--hl)*15vmin + var(--sel)*100%);
  --mask:
  	linear-gradient(red 0 0),
  	radial-gradient(circle at var(--x) var(--y),
  		red var(--r), transparent 0);
  background: #222;
  filter: url(#f);
  -webkit-mask: var(--mask);
  -webkit-mask-composite: xor;
  mask: var(--mask);
  mask-composite: exclude;
  transition: --r 0.3s;
}
figure::after {
  transform-origin: calc(50%*(1 + var(--sgn)));
  transform: scalex(var(--not-sel));
  background: #666;
  mix-blend-mode: multiply;
  transition: transform 0.3s, transform-origin 0s calc(var(--not-bit)*0.3s);
}
figure:hover {
  --hl: 1 ;
}

img {
  grid-area: 1/1;
  max-width: 70vw;
  height: 70vmin;
  object-fit: cover;
  mix-blend-mode: color;
}

JavaScript

document.documentElement.classList.add('js');

const _WRP = document.querySelector('.gallery'),
IMGS = [..._WRP.querySelectorAll('figure')].map(c => ({
  _el: c,
  i: c.style.getPropertyValue('--i') })),

N = IMGS.length;

let w,k = 0;

function posx() {
  _WRP.style.setProperty('--o', `${.5 * w - IMGS[k].o - .5 * IMGS[k].w}px`);
};

function size() {
  w = document.body.getBoundingClientRect().width;

IMGS.forEach(c => {
    let r = c._el.getBoundingClientRect();

c.o = r.x;
    c.w = r.width;
  });

posx();
};

addEventListener('load', size);

addEventListener('click', e => {
  let _t = e.target;

if (_t.src) {
    let _p = _t.parentNode;
    _WRP.style.setProperty('--k', k = +_p.style.getPropertyValue('--i'));
    posx();
  }
});

addEventListener('mousemove', e => {
  let _t = e.target;

if (_t.src) {
    let _p = _t.parentNode,
    r = _p.getBoundingClientRect(),
    x = e.clientX,y = e.clientY;

_p.style.setProperty('--x', `${+((x - r.x) / r.width * 100).toFixed(2)}%`);
    _p.style.setProperty('--y', `${+((y - r.y) / r.height * 100).toFixed(2)}%`);
  }
});

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg