Anton Filippov

добавьте body {overflow-y: scroll}, тогда скролл не будет пропадать и экран не будет дёргаться.

Ещё один вариант, который я использовал на сайте, где больше половины страницы вмещались в высоту экрана и скролл всем добавлять не хотелось, это сделатьwidth: 100%для body, а для всех элементов на странице(header, content, etc) ширину задавать так: width: calc(100% + 15px).

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

ну вообще, не квадрат получается, а изначальная высота блока + квадрат, сторона квадрата равна ширине родителя, допустим body.

без position: sticky то же самое

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

Если нужен пиксель-перфект и макет переделываться не будет - делайте свою сетку без буцтрапа

используйте scrollMagic

А название этого "эффекта" - parallax.

Мне придется высчитывать координаты мыши и только так определять на каком элементе находится курсор?

Да

Конечно изврат, но ради челенджа я сделаль) https://codepen.io/vicodin/pen/xpdENZ?editors=1100

Это для того, чтобы вы поняли суть, а уж тюнить под 100% картинку будете сами, играясь с размерами хелперов(белых кружков) и их позишнами

Вы поймете только в процессе работы, да и никто не будет 100% всех фич использовать в каждом проекте.

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

Напишите стили на 5000 строк и замучаетесь скроллить туда-сюда - начнёте использовать импорты.

Замучались писать селекторы по 5 классов глубиной? Начнёте использовать наследование (а потом ещё и БЭМ).

Надоест писать @media screen and max-width($width-md) {...} - напишите первый миксин $breakpoint-md {...}.

И Т Д