Rustam Bainazarov

Если на голом JS и с троттлингом. Извините, если кого обидел лицом на фоне в примере:

https://developer.mozilla.org/ru/docs/Web/Events/resize

Комбинируя ответ Ярослав Иванов, идею касательно hover'а от Арсений Матыцин и делегирование функций, на нативном JS можно сделать так:

// наведение
document.body.addEventListener("mouseenter", function(e) {
  if (e.target.classList.contains('item')) {
 
    let item = e.target;
    let itemShadowGap = 15;
    let itemShadow = item.querySelectorAll('.shadow')[0];
    let itemBottom = item.querySelectorAll('.button')[0];
    let itemShadowHeight = itemShadow.scrollHeight + itemBottom.scrollHeight + itemShadowGap;

    // проверяем, нет ли атрибута
    if (!item.hasAttribute('data-shadow-limiter-delay')) {
      item.setAttribute('data-shadow-limiter-delay', true);
      itemShadow.style.maxHeight = '' + itemShadowHeight + 'px';
    }

    item.style.zIndex = '10';
    itemShadow.style.height = '' + itemShadowHeight + 'px';

  }
}, true);

// отведение
document.body.addEventListener("mouseleave", function(e) {
  if (e.target.classList.contains('item')) {
  
    let item = e.target;
    let itemShadow = item.querySelectorAll('.shadow')[0];
    let itemShadowHeight = itemShadow.scrollHeight;

    // убираем максимальную высоту и атрубут по задержке
    if (item.hasAttribute('data-shadow-limiter-delay')) {
      setTimeout(function() {
        item.removeAttribute('data-shadow-limiter-delay');
        itemShadow.style.maxHeight = '';
      }, 3000);
    }

    item.style.zIndex = '';
    itemShadow.style.height = '';

  }
}, true);

Таким образом решается вопрос с адаптивностью (высота считается при каждом hover'e), а также функция работает с динамически созданными элементами. Проверил на старом ноутбуке (мобильный Core i5 2-го поколения, 4 Гб ОЗУ и встроенная видеокарта; FireFox, Chrome, IE11), нет никаких задержек обработки скрипта в условии наличия 600 ед. элементов. И это с учетом всех остальных скриптов на сайте.

SVG и только SVG.

Ну, можно, конечно, делать всякие абсолютно позиционированные прозрачные блоки на HTML, но там это сложнее позиционировать в силу отсутствия viewBox, как у SVG.

Кроме того, блоки на HTML не могут иметь произвольную форму, а только прямоугольную (clip-path не в счёт, с ним ещё сложнее будет реализовать), что вызовет проблемы при совмещении нескольких объектов произвольной формы вместе. Точнее, будет проблема с зоной взаимодействия этих объектов при наведении мышки из-за наложения прямоугольников.

Все такие интерактивные карты делают с помощью SVG, что как бы намекает.

https://medium.com/@mattcroak718/creating-an-inter...

Я делал такую карту с помощью Boxy SVG:
https://boxy-svg.com

Можно делать в Inkscape, там тоже есть режим просмотр кода разметки.

Конкретно как там — делать не стоит. Там анимируется с помощью свойства top, поэтому все глючит и скачет с 10-ю кадрами в секунду. Анимировать такие штуки надо с помощью translate3d, чтобы задействовать GPU. Почему translate3d, а не translateX? Потому что анимирование c с помощью translateX глючит (идет с рывками) в IE11, первых EDGE и старых Firefox, если сочетать с transition для эффекта инерции.

Один из таких плагинов, который делает это нормально:
https://dixonandmoe.com/rellax

Он анимирует как раз с помощью translate3d. У меня есть положительный опыт работы с ним. Но не переусердствуйте :))

Update: Хотя я и за плагин выше, потому что он сильно упрощает задачу по позиционированию, инициализации и изменению скорости параллакса, но обратите внимание на ответ Максим Ленский касательно метода без плагина.

Дополняя ответ Максим Ленский и совмещая его с translate3d, можно сделать так. Код ниже содержит много лишнего CSS, потому что он из проекта вырван. Скорее всего, JS тоже весьма примитивен (ибо я писал), но суть алгоритма ясна:

Достаточно простое решение нашел на kinopoisk.ru. Как и всегда в таких случаях, оно лежало на поверхности.

В переменную сохраняем текущее положение прокрутки body, на body вешаем стилями полученное значение (только отрицательное) в свойство top. Так же нужно добавить position: fixed и left: 0 (right: 0 тоже можно, хуже не будет). Да-да, всё же fixed, засим, может поломать transform.

Вот такие inline-стили для body от работы данного метода на Kinopoisk:

top: -345px;
left: 0px;
right: 0px;
position: fixed;

Проверил у себя на устройствах: работает в iOS Safari 11 и 12. Иных путей решения данной проблемы найти не удалось.

Update. Забыл добавить функции, что я написал, они не супер-гипер крутые, но рабочие:

// 1. Фиксация <body>
function bodyFixPosition() {

  setTimeout( function() {
  /* Ставим необходимую задержку, чтобы не было «конфликта» в случае, если функция фиксации вызывается сразу после расфиксации (расфиксация отменяет действия расфиксации из-за одновременного действия) */

    if ( !document.body.hasAttribute('data-body-scroll-fix') ) {

      // Получаем позицию прокрутки
      let scrollPosition = window.pageYOffset || document.documentElement.scrollTop;

      // Ставим нужные стили
      document.body.setAttribute('data-body-scroll-fix', scrollPosition); // Cтавим атрибут со значением прокрутки
      document.body.style.overflow = 'hidden';
      document.body.style.position = 'fixed';
      document.body.style.top = '-' + scrollPosition + 'px';
      document.body.style.left = '0';
      document.body.style.width = '100%';

    }

  }, 15 ); /* Можно задержку ещё меньше, но у меня работало хорошо именно с этим значением на всех устройствах и браузерах */

}

// 2. Расфиксация <body>
function bodyUnfixPosition() {

  if ( document.body.hasAttribute('data-body-scroll-fix') ) {

    // Получаем позицию прокрутки из атрибута
    let scrollPosition = document.body.getAttribute('data-body-scroll-fix');

    // Удаляем атрибут
    document.body.removeAttribute('data-body-scroll-fix');

    // Удаляем ненужные стили
    document.body.style.overflow = '';
    document.body.style.position = '';
    document.body.style.top = '';
    document.body.style.left = '';
    document.body.style.width = '';

    // Прокручиваем страницу на полученное из атрибута значение
    window.scroll(0, scrollPosition);

  }

}

Для Bootstrap'овских модальных окон можно сделать универсальный вызов этих функций при их открытии и закрытии:

$(document).on('shown.bs.modal', function () { // открытие любого модального окна Bootstrap
  bodyFixPosition();
})

$(document).on('hidden.bs.modal', function () { // закрытие любого модального окна Bootstrap
  bodyUnfixPosition();
})

Эм, ну как — как? Чтобы сверстать некий «любой анимированный элемент» нужно его… сверстать.

Да-да, вы не ослушались, его нужно сверстать — т. е. воспользоваться HTML, CSS, JS и, если нужно, canvas.

Ну а рассказывать обо всём диапазоне технологий и их практическом применении, во-первых, никто не сможет, а во-вторых, никто не будет. У вас слишком общий вопрос.

Самый правильный вариант — с помощью clip-path, потому что с его помощью безо всякого вращения можно обрезать по формуле блок сверху и снизу. При этом, можно использовать значения по типу calc(100% - 50px), чтобы при изменении ширины экрана, область «скоса» всегда равнялась, как в значении выше, 50 пикселям, что упрощает совмещение нескольких таких блоков с помощью отрицательных margin'ов ( margin: -50px 0; ).

Если делать трансформации обёртки, как писали выше, то придётся на каждом отдельном разрешении следить за тем, чтобы, во-первых, между такими блоками не было зазоров, а также за тем, чтобы внутренний отступ до контента был в порядке.

Одна проблема — поддержка clip-path со стороны браузеров. Вот пример реализации такого подхода: proappliancerepair.com. У меня не стояло задачи поддерживать старые браузеры, поэтому использовал clip-path смело.