Максим Тимофеев

а где там подгрузка? Ни одного ajax запроса при скроле нет. Это просто появляющиеся блоки. Цепляемся за событие скрола, определяем какие элементы видны, добавляем класс, в css на этот класс вешаем анимацию.
Есть миллион готовых решений, например https://daneden.github.io/animate.css/

как реализовать самому ?

взять и реализовать. С помощью знаний по html + css + js или jquery . Вы вопрос конкретный задайте. В чем у Вас проблема реализовать такое? А то звучит как "как сделать сайт?". Вот что на такое ответить?

Хотите менять цвета из css - используйте svg. Png и jpg нельзя управлять из css, только косвенно, как написал Павел Грузных.

Фоновая картинка + backrgound-size: auto 100%;

при нажатие на "мой кабинет"

там есть только "кабинет"

что-то вроде попап окна.

ну так сделайте нормальное pop-up окно.

уже и overflow пробовал и margin

К какому элементу Вы это применяете? Ваша форма .site-form.js-site-form_enter у нее possition: fixed; Зачем? И зачем фон отдельно? Засуньте форму в div c фоном, уберите у формы fixed. Родителю, сделайте не height:100%; а min-height:100%; что бы форма его растягивала. Тогда будет скрол.

Сделать новому item margin-top равный высоте, плавно убирать до 0.

А зачем такие сложности? ::before в помощь

https://jsfiddle.net/bjnz4y8e/14/

описать в js изменения отступов при событии ресайза окна

Много вариантов, это заливка градиентом и маска скорее всего. Читайте про svg и/или canvas

Не мучайтесь, возьмите скрипт скрола и юзайте:
manos.malihu.gr/jquery-custom-content-scroller

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

Хорошо/плохо зависит не от того "что Вы делаете", а от того "как Вы делаете".
Берете его в виде sass, переопределяете все что хотите, пересобираете, пользуетесь - хорошая практика.
Влазите своими стилями и вставляете костыль - плохая практика.

Я Вам больше скажу, в официальной документации даже четко рассказано, как это правильно сделать:
https://getbootstrap.com/docs/4.0/layout/grid/#cus...

Можно задавать размер шрифта, кроме как в px?

Можно и не только в %, есть и куча других единиц: pt, vh, vw, vmin, vmax, em, rem и т.д.

Чтобы он сам изменялся в зависимости от высоты блока.

только через js. Расчет идет от базового размера шрифта. Есть вариант с vh и иногда помогает, если высота блока зависит от высоты окна или наоборот, то иногда можно вычислить таким образом размер шрифта и указать в vh. Но это так себе метод.

Думаю начать стоит тут и тут

.my-hren {
overflow: hidden;
height: 100vh;
}