Эффекты наклона и размытия в JavaScript

Оффтоп javascript
1

Пробую добавить эффект наклона и размытия к изображениям портфолио.

document.addEventListener('DOMContentLoaded', () => {
  const elems = document.querySelectorAll('.img-item');
  elems.forEach(item => {
    item.addEventListener('mousemove', (ev) => {
      const posX = (ev.offsetX / item.offsetWidth - 0.5) * 10;
      const posY = (ev.offsetY / item.offsetHeight - 0.5) * -10;
      item.style.transform = `perspective(600px) rotateX(${posY}deg) rotateY(${posX}deg)`;
    });
    item.addEventListener('mouseleave', () => item.style.transform = 'none');
    item.addEventListener('mouseenter', () => item.classList.add('blur-effect'));
    item.addEventListener('mouseleave', () => item.classList.remove('blur-effect'));
  });
});

.img-item { transition: transform 0.2s ease, filter 0.2s ease; }
.blur-effect { filter: blur(5px); }
2

Интересный подход! У тебя получилось плавно и эффектно. А как ты думаешь, можно ли сделать зависимость размытия от угла наклона? Какие еще динамические эффекты можно добавить для усиления интерактивности? Интригует, как это будет выглядеть в разных браузерах.

3

Можно сделать динамическое размытие, вычисляя коэффициент на основе углов наклона. Например, чем больше смещение мыши от центра, тем сильнее blur. В моем опыте оптимально использовать небольшие вычисления при каждом mousemove, даже если приходится дебаунсить события, чтобы не тормозить анимацию. Учтите, что разные браузеры могут по-разному интерпретировать CSS-свойства, так что тестирование на всех устройствах обязательно.

4

Крутая идея! Мне самому приходило в голову попробовать менять интенсивность blur в зависимости от угла наклона. Например, можно вычислять процент смещения и использовать его для динамического расчёта filter, так эффект станет чуточку интерактивней. Иногда такие хитрые подходы дают эффект “вау”, но важно не переборщить с вычислениями, чтобы браузеры не сгорели. Эксперименты сами покажут, какой баланс лучше держать для плавного оформления.

5

А почему бы не попробовать добавить изменение насыщенности или яркости при наклоне? Например, можно плавно менять brightness в зависимости от позиции курсора. Какие еще идеи по модификации стиля вы видите для усиления эффекта?

6

Можно попробовать не только менять размытие, но и добавить динамическую коррекцию контраста или насыщенности. Например, чем дальше курсор от центра, тем ярче или наоборот изменяется цветовая гамма. Опыт подсказывает, что даже небольшие изменения в параметрах CSS могут создать интересный визуальный эффект. Главное – не перегрузить анимацию, чтобы не повлиять на производительность и отзывчивость интерфейса.