На "этом сайте" использовали jQuery.
Если вам все равно на чем реализовать такой эффект (и jQuery для реализации подходит),
то советую заглянуть в файл
rombico.ru/js/main.js.
Там все вполне понятно:
$(document).on('scroll touchmove', function() {
scaleMain($(this).scrollTop(), mainServiceHeight);
})
function scaleMain(scrollTop, height) {
if ($(window).width() >= 1240) {
var $mainService = $('.main--service-page'),
tStart = 0,
tEnd = height,
sStart = 1,
sEnd = 0.7,
p = (scrollTop - tStart) / (tEnd - tStart);
po = 1 - Math.min(1, Math.max(0, p));
pt = 1 - 0.1 * Math.min(1, Math.max(0, p));
$mainService.find('.main__background-img').css('transform', 'scale(' + 1 * pt + ')');
$mainService.find('.main__background-img').css('opacity', (1 * po));
$mainService.find('.main__container').css('transform', 'translate(-50%, 0) translateZ(0) scale(' + (1 * pt) + ')');
$mainService.find('.main__container').css('opacity', (1 * po));
if (scrollTop > height) {
$('.main--service-page').hide();
} else {
$('.main--service-page').show();
}
if (scrollTop > 1) {
$('.main--service-page').css('pointer-events', 'none');
} else {
$('.main--service-page').css('pointer-events', 'all');
}
}
}
