Ответы пользователя по тегу Веб-разработка
  • Как сделать изменение размера и прозрачности при скроллинге?

    @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');
            }
        }
    }
    Ответ написан
    Комментировать