Ragtime Kitty

Типа вот так должно быть?

Можно через два keyframes, если не смущает анимация при загрузке.

SVG

Можно, например, вот так:

Вы имеете ввиду что-то типа такого?

Через градиент вряд ли, можно нарисовать фон через SVG:

Можно делать через сложные формулы смешения цветов, но я не умею в математику и поэтому в вашем случае делала бы это через наложение начального и конечного цветов, а также анимацию уменьшения/увелечения прозрачности.

Опасити легко анимировать от 0 до 1, а визуально такой переход не отличается от стандартной анимации цвета в CSS: https://jsfiddle.net/ce4vno1g/

Достаточно будет менять прозрачность следующего/предыдущего фона в зависимости от прогресса перетаскивания + delay:

Есть еще такой вариант

Как вам подсказали в комментариях: перенесите сами инпуты в начало общей обертки и немного измените селекторы:


И в дальнейшем выкладывайте, пожалуйста, весь код в песочницу.

Если карта динамичная, то backdrop-filter, который, увы, работает только в сафари или вебките с флагами.

Вот тут пара приемов чтобы его имитировать: https://iamvdo.me/en/blog/css-element-function#fak...
А вот тут общая инфа: https://iamvdo.me/en/blog/advanced-css-filters

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

mix-blend-mode: difference;

При открытии меню вешается класс на body

.nonScroll {
    overflow: hidden;
}

Т.е. при открытом меню у body просто отключен скролл.

Я бы как-то так делала.

Появление через обычные @keyframes и forwards
Чтобы перестраивалась шапка, как уже сказали, отслеживайте скролл и добавляйте класс. Там пара строчек. С чем именно трудности?

E.g.

Через SVG, можно инлайн, можно просто картинкой:


Размеры рамки через stroke-dasharray='length gap' stroke-width='3'

Можно еще через маску, если фон будет не сплошным цветом.

Вы можете поменять их местами в разметке и использовать обертку с column-reverse:


Только саму обертку таким образом скрыть не получится. Тут только скрипты.

Вот такое на ум приходит. Ну под шрифт подогнать там если что

По нажатию мышки на элементе начинаете отслеживать передвижение курсора, и в зависимости от его положения начинаете двигать блок. При отпускании мышки проверяете, дошёл ли ваш блок до вашего «условного места». Если да - делайте с ним, что душе угодно. Если нет - возвращаете в исходную позицию.

Простенький пример, топорный и на ванильном JS


Ну а можете просто воспользоваться готовым решением типа slick

Сделать рамку прозрачной, при hover менять цвет рамки на нужный.