Relow
@Relow
Ничего не умею

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

Как сделать эфеффект первого экрана при скроллинге, как на этом сайе
  • Вопрос задан
  • 54 просмотра
Решения вопроса 2
@shevchenko__k
Помогаю новорожденным web программистам
При событии scroll изменять у картинки три параметра css width, height и zoom.
а лучше забери себе js этой страницы, найди эту функцию и скопируй себе. Я бы так и сделал бы. Мне кажется это должен быть отделенный файл.
Ответ написан
Комментировать
@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');
        }
    }
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы