/* ========================================================================== Появление элементов при прокрутке Разметку руками не размечаем: js/reveal-in.js сам проходит по секциям и ставит data-rv с направлением и задержкой. Новые блоки подхватываются без правок в HTML. Класс .js-reveal ставится на только когда скрипт действительно запустился. Без JS ни один элемент не спрятан — страница читается целиком. Это важнее красивого входа: спрятать контент через opacity: 0 и не показать его из-за ошибки в скрипте — худший из возможных исходов. Анимируются только opacity и transform: их браузер считает на компоновщике, без пересчёта раскладки. Ни will-change, ни фильтров здесь нет намеренно — на слабой машине десятки таких слоёв дороже самой анимации. ========================================================================== */ .js-reveal [data-rv] { opacity: 0; /* opacity чуть быстрее сдвига — карточка «уже видна», пока доезжает. */ transition: opacity 0.55s var(--ease), translate 0.75s var(--ease), scale 0.75s var(--ease); transition-delay: var(--rv-delay, 0s); } /* Двигаем отдельными свойствами translate и scale, а НЕ через transform. Причина принципиальная: у многих элементов свой transform уже занят — наклон зелёной плашки, зеркальная фотография ветки, веер карточек. Запись через transform стирала бы их насмерть, потому что в конце перехода стоит сброс. translate и scale — отдельные свойства, они складываются с чужим transform и не конфликтуют. */ .js-reveal [data-rv='up'] { translate: 0 2rem; } .js-reveal [data-rv='down'] { translate: 0 -1.5rem; } .js-reveal [data-rv='left'] { translate: -2.5rem 0; } .js-reveal [data-rv='right'] { translate: 2.5rem 0; } .js-reveal [data-rv='zoom'] { scale: 0.96; } .js-reveal [data-rv='fade'] { translate: none; } /* Карточки домов почти в рост экрана: штатный сдвиг на них не читается. Даём заметный подъём и лёгкое приближение — появление видно в кадре. */ .js-reveal .houses__card[data-rv='up']:not(.is-in) { translate: 0 4.5rem; scale: 0.985; } .js-reveal [data-rv].is-in { opacity: 1; translate: none; scale: none; } /* Отыграл — снимаем переход. Иначе он висит на каждой цели до конца жизни страницы: любое чужое изменение прозрачности или сдвига (наведение, открытие панели, работа слайдера) тянуло бы за собой лишнюю анимацию на секунду. Класс ставит скрипт по transitionend, там же снимается will-change. */ .js-reveal [data-rv].rv-done { transition: none; } /* Системная настройка «меньше движения»: сдвиг убираем, проявление оставляем. Полный отказ от анимации выглядит как поломка, а просьба была про движение. */ @media (prefers-reduced-motion: reduce) { .js-reveal [data-rv] { translate: none !important; scale: none !important; transition: opacity 0.4s linear; } } /* ========================================================================== Скрытие до первой отрисовки Скрипт расставляет data-rv только после разбора документа, а браузер к тому моменту уже успевает показать страницу. Получалось «показалось — спряталось — появилось». Класс rv-boot ставит крошечный встроенный скрипт в , до первой отрисовки, поэтому страница не мигает. Тот же встроенный скрипт через 4 секунды принудительно ставит rv-ready: если основной скрипт не отработает, страница всё равно покажется. Скрывать контент можно только с гарантией, что он появится. ========================================================================== */ html.rv-boot body { opacity: 0; } html.rv-boot.rv-ready body { opacity: 1; transition: opacity 0.35s var(--ease); } /* ========================================================================== ≤640: общее уменьшение пагинации всех слайдеров Файл грузится последним, поэтому правила перекрывают секционные. ========================================================================== */ @media (max-width: 40em) { /* Стрелки: comparison/advantages/nearby/audience используют один класс. */ .comparison__pagination-arrows, .reviews__nav-img { width: 6rem; } /* Счётчики компактнее. */ .comparison__pagination-counter, .reviews__counter { padding: var(--s-3); border-radius: var(--r-md); font-size: 0.9375rem; } }