Как сделать изменение размера и прозрачности при скроллинге?

Question

[Егор Антропов]

Как сделать эфеффект первого экрана при скроллинге, как на этом сайе

Answer 1

[Konstantin Zhikhor]

При событии scroll изменять у картинки три параметра css width, height и zoom.
а лучше забери себе js этой страницы, найди эту функцию и скопируй себе. Я бы так и сделал бы. Мне кажется это должен быть отделенный файл.

Answer 2

[triton]

На "этом сайте" использовали 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');
        }
    }
}