Mizutsune

Это называется Before/After Image Slider Comparison или просто Image Comparison Slider.

Несколько плагинов на JQuery.
Несколько разных вариантов.
Ещё можно на Codepen поискать. Есть несколько вариантов.

Или если хорошо поискать и на других сайтах, то может найдутся вполне неплохие варианты.

Можно сделать например через clip-path + SVG.

Если кратко объяснить процесс, то это делается примерно так:

Рисуете в графическом редакторе фигуру, которая будет использоваться в качестве контейнера для видео. Далее копируем код SVG и воспользовавшись данным инструментом, получаем координаты для реализации clip-path.

Финальная реализация будет выглядеть примерно так:

<svg class="svg">
  <clipPath id="my-clip-path" clipPathUnits="objectBoundingBox">
    <path d="M0.5,0 L1,1 H0"></path>
  </clipPath>
</svg>

<div class="clipped">
  <video src="./assets/video.mp4"></video>
</div>

.svg {
     position: absolute;
     width: 0;
     height: 0;
}

.clipped {
     width: 100%;
     max-width: 500px;
     height: 350px;
     -webkit-clip-path: url(#my-clip-path);
     clip-path: url(#my-clip-path);
}

video {
        width: 100%;
        height: 100%;
        object-fit: cover;
}

Не закрыт тег <article> с классом info и тег <div> с классом services.

Конечно неплохо было бы добавить кнопке отдельный класс и уже дальше стилизовать кнопку по селектору класса, а не по имени тега. Ну это так, скорее рекомендация.

А так по поводу вопроса, то можно сделать например вот так:

button {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

Анимация не работает потому что в переменной --animation-duration скорее всего содержится <число>ms. Если указать только число, то всё будет работать.

Однако зачем такие calc(var(--animation-duration) * 1ms) сложности? Неужели не проще написать напрямую время анимации или пусть даже в переменной, но без calc() и прочего? Для чего лишние вычисления и прочие операции? Не нужно ничего усложнять.

Можно написать намного проще.

Указываем нужное время анимации в переменной:

--animation-duration: 500ms;

Используем без всяких наворотов и лишних движений:

.add-panel_button.sending .svg{
    animation: fly-out-in var(--animation-duration) ease-in-out;
}

В скрипте тоже содержится достаточно лишнего кода. Вместо setTimeout можно прослушивать событие animationend на нужном элементе и тогда лишние вычисления станут реально "лишними" и их можно будет удалить.

addTodoButton.addEventListener("click", () => {
     addTodoButton.classList.add("sending");
     addTodoButton.addEventListener("animationend", e => {
               addTodoButton.classList.remove("sending");
               addItem();
          }, { once: true }
     );
});

Если макет не слишком сложный, то можно обойтись и медиа запросами.

Например вот так:



Плюс минус немного JS для смены класса и прочее, но в основном всю работу выполняет CSS.

Если по каким-то причинам недостаточно медиа запросов из CSS, тогда можно воспользоваться методом matchMedia.

Простой пример использования:

const targetElement = document.querySelector(".target");
const breakpoint = window.matchMedia("(max-width: 700px)");

const breakpointChecker = () => {
     if (breakpoint.matches) {
          targetElement.textContent = "Apple";
     } else {
          targetElement.textContent = "Orange";
     }
};

breakpoint.addEventListener("change", breakpointChecker);
breakpointChecker();

Однако несмотря на доступность и простоту использования данного подхода, разумеется намного лучше ограничиться использованием медиа запросов из CSS, чтобы не создавать дополнительную нагрузку применяя JavaScript там где можно обойтись без него.

Вообще современный CSS уже способен решать многие задачи, связанные например с такими вот случаями, когда требуется модификация блока для отображения на декстопе/мобильнике и если раньше приходилось использовать две разные вёрстки того или иного элемента для разных разрешений экрана или добавлять javascript для решения подобных задач, то уже сейчас в большинстве случаев, такой нужды не осталось.

И всё как бы понятно и хорошо, но всё же есть такие моменты когда использование JS при работе с медиа запросами - оправданно и matchMedia отлично справляется с поставленными задачами, например когда нужно включить/отключить какой-нибудь плагин или произвести какие-нибудь действия, которые невозможно выполнить используя один только CSS.

Как альтернативу matchMedia, конечно можно использовать событие resize, но в таком случае придётся оптимизировать функцию используемую в обработчике, так как resize имеет свои подводные камни.

Правильнее будет сделать кнопкой, то есть тегом </button>. При использовании данного тега есть свои плюсы и одним из них является поддержка фокуса по дефолту, т.е если юзать например </div>, то тогда придётся делать дополнительные телодвижения чтобы кнопка слепленная из тега </div> - корректно принимала на себя фокус, например, с клавиатуры. Да и к тому же более семантично использовать </button> для подобных целей. Хотя можно использовать и тег <input>, но в данной ситуации, он совершенно не к месту.

Как поменять цвет активного буллита

.swiper-pagination-bullets .swiper-pagination-bullet-active {
// стили для активного буллета
}

и как их все вместе немного сдвинуть вниз

Добавить определенные стили для элемента .swiper-pagination-bullets. Например margin-top или если блок с буллетами имеет абсолютное позиционирование, тогда использовать свойство top.

Это реализуется многими способами, но вот например как можно сделать гридами:

Разметка:

<div class="wrapper">
     <header></header>
     <main></main>
     <footer></footer>
</div>

Стили:

.wrapper {
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 100%;
    min-height: 100vh;
}