/* ============================================================================ ISELLPOWER · trionn.css (v320) Скролл в духе trionn.com: раздел не уезжает вверх, а ОСТАЁТСЯ на экране, пока следующий наезжает на него сверху. Фон один и тот же, шва не видно. Пара к assets/trionn.js. Подключается ПОСЛЕДНИМ в у index.html. Все правила живут внутри html.tsn-on — если скрипт не загрузился, страница листается ровно как в v306. Разметку index.html скрипт не переписывает: он только вешает классы и вставляет перед въезжающим разделом пустую прослойку с затемнением. ── КАК ЭТО УСТРОЕНО ─────────────────────────────────────────────────────── Держащий раздел (.tsn-hold) получает position:sticky и bottom:0. Это не то же самое, что top:0 из демо: с top раздел прилипал бы верхом и всё, что ниже сгиба, стало бы недоступно — а разделы сайта выше экрана в два-три раза. С bottom:0 раздел сначала прокручивается как обычно, а прилипает ровно в тот момент, когда его НИЖНЯЯ кромка дошла до низа экрана, то есть когда он весь прочитан. Дальше он стоит, и на него наезжает следующий. Въезжающий раздел (.tsn) — просто следующий по разметке. Чтобы он шёл поверх держащего, скрипт раздаёт разделам возрастающие z-index; сами по себе они все лежат на z-index:2 и рисовались бы в порядке разметки, но между ними нужно ещё уместить затемнение. Затемнение (.tsn-veil) — пустая прослойка нулевой высоты прямо перед въезжающим разделом; внутри неё лежит экран темноты, растущий вверх от его верхней кромки. Оно едет вместе с разделом и гасит ровно то, что осталось стоять сверху. Прослойкой, а не псевдоэлементом внутри раздела: у .travel, .aiws и .proof стоит overflow:hidden, там затемнение обрезало бы по своей же границе. ── ПУЛЬТ ────────────────────────────────────────────────────────────────── --tsn-r скругление верхней кромки въезжающего --tsn-dim насколько темнеет держащий --tsn-depth насколько он уменьшается (глубина) Список разделов — в начале assets/trionn.js, в массиве CHAIN. ============================================================================ */ html.tsn-on{ --tsn-r: 56px; /* скругление верхней кромки въезжающего */ --tsn-dim: .90; /* насколько темнеет держащий */ --tsn-depth: .16; /* насколько он уменьшается */ --tsn-lift: 5.8vh; /* насколько уходит вверх */ } /* ── Держащий раздел ────────────────────────────────────────────────────── position и bottom скрипт ставит инлайном (у #custom своё правило с id в селекторе, стилями его не перебить без !important). Здесь только то, что к прилипанию не относится. */ html.tsn-on .tsn-hold{ --out: 0; /* top и transform-origin ставит скрипт в пикселях: и то и другое зависит от высоты раздела, а она у каждого своя и меняется от ширины окна. Точка уменьшения — середина ВИДИМОЙ части раздела, а не середина всей простыни: иначе блок высотой в три экрана уползал бы вбок. */ } /* Сама трансформация включается только на время наезда. Держать её постоянно нельзя: даже scale(1) делает раздел системой координат для всего, что внутри него позиционируется, и заодно просит у браузера отдельный слой. */ html.tsn-on .tsn-hold.tsn-sink{ transform: translateY(calc(-1 * var(--tsn-lift) * var(--out))) scale(calc(1 - var(--tsn-depth) * var(--out))); } /* Первый экран и «Конфигуратор» не уменьшаем: внутри у них свои прилипающие элементы (кадр Hero и сцена сборки), а трансформация на родителе меняет систему координат и ломает их прилипание. Обоим это и не нужно — они и так читаются как отдельная полноэкранная сцена. */ html.tsn-on .tsn-flat, html.tsn-on .tsn-flat.tsn-sink{transform:none} /* Держащий полностью закрыт следующим — можно не рисовать вовсе. Раскладку visibility не трогает, поэтому прилипание остаётся. */ /* Полностью закрытый держащий раздел не только прячем, но и уводим далеко вверх. Дело вот в чём: раздел остаётся ПРИЛИПШИМ до самого низа страницы, то есть геометрически он всё время в окне. Наблюдатели внутри него (IntersectionObserver у «Производительности», у ленты Hero и прочих) видят «я на экране» и продолжают крутить свои циклы и держать видео играющим — до конца страницы. Отсюда и общая тяжесть, и подвисания видео. Сдвиг на два экрана вверх выводит раздел из поля зрения наблюдателей: они честно сообщают «меня не видно», раздел сам себя останавливает и ставит видео на паузу. Прилипание сдвиг не трогает — оно считается до трансформации, а раздел в этот момент и так неподвижен. Возвращаемся вверх — класс снимается, всё оживает само. */ html.tsn-on .tsn-hidden{visibility:hidden;transform:translateY(-200vh) !important} /* ── Въезжающий раздел ────────────────────────────────────────────────── */ html.tsn-on .tsn{ --in: 0; border-radius: calc(var(--tsn-r) * (1 - var(--in))) calc(var(--tsn-r) * (1 - var(--in))) 0 0; box-shadow: 0 calc(-34px * (1 - var(--in))) calc(86px * (1 - var(--in))) calc(-26px * (1 - var(--in))) rgba(0,0,0,.92); } /* Разделы без своего фона просвечивали бы держащего насквозь. #050506 — тот же цвет, что и у страницы, так что на глаз ничего не меняется; фоновое зерно body::after под ними больше не видно — ровно как уже было под «В дорогу», «Искусственный интеллект» и отзывом. */ html.tsn-on .tsn-fill{background-color:#050506} /* ── Затемнение + светлая кромка ──────────────────────────────────────── */ html.tsn-on .tsn-veil{ position:relative; height:0; pointer-events:none; } html.tsn-on .tsn-veil > i{ position:absolute; left:0; right:0; bottom:0; display:block; } html.tsn-on .tsn-shade{ height:100vh; background:#050506; opacity:calc(var(--tsn-dim) * var(--in)); } /* v385 · УГЛЫ ВЪЕЗЖАЮЩЕЙ ПАНЕЛИ. Затемнение доходило ровно до верхней кромки въезжающего (bottom:0 у прослойки). Но панель приезжает СО СКРУГЛЕНИЕМ, и в двух верхних углах остаются «окошки» — сквозь них виден держащий раздел БЕЗ затемнения. Над чёрным разделом разницы не видно, поэтому у всех пар ниже по странице всё чисто. А над видео Hero угол светился вдвое ярче кромки — замер на середине наезда, 390x844: над кромкой пиксель 33/35/41, в уголке 60/64/74. Глаз читает это как криво обрезанный край рамки. Лечение: уводим низ затемнения ниже кромки на величину скругления. Всё, что ниже кромки, и так закрыто самой панелью — кроме этих самых уголков, а они наконец темнеют заодно со всем остальным. Селектор тяжелее правила `.tsn-veil > i{bottom:0}` выше — иначе не перебить. */ html.tsn-on .tsn-veil > i.tsn-shade{bottom:calc(-1 * var(--tsn-r) - 2px)} /* Тонкая светлая полоска по кромке въезжающего — видно только пока он едет. Гаснет к краям, поэтому на скруглённых углах не торчит. */ html.tsn-on .tsn-edge{ height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.30) 20%, rgba(255,255,255,.30) 80%, transparent); opacity:calc(1 - var(--in)); } /* ── Телефон ────────────────────────────────────────────────────────────── Уменьшение почти убираем: на маленьком экране заметный «провал» читается как рывок, а не как глубина. Затемнение и кромка остаются. */ @media(max-width:900px){ html.tsn-on{--tsn-depth:.08;--tsn-dim:.85;--tsn-r:34px;--tsn-lift:2.6vh} html.tsn-on .tsn-shade{height:100svh} /* v366 — САМАЯ ДОРОГАЯ СТРОКА ЭФФЕКТА НА ТЕЛЕФОНЕ. Выше тень задана через var(--in): и смещение, и радиус размытия, и разгон считались заново на КАЖДОМ кадре прокрутки. Размытая на 86px тень во всю ширину раздела — это полная перерисовка огромного слоя двадцать раз в секунду, причём на GPU она не уходит: box-shadow с меняющимся радиусом браузер каждый раз рисует заново. Оставляем тень постоянной и мягкой: на глаз в движении разницы нет, потому что кромка всё равно перекрыта затемнением .tsn-shade, а скругление (оно дёшево) продолжает раскрываться как раньше. */ html.tsn-on .tsn{box-shadow:0 -18px 40px -14px rgba(0,0,0,.9)} /* ── v383 · Hero на телефоне НЕ трансформируем вовсе ───────────────────── Пара «Hero держит → Каталог въезжает» вернулась на телефон, и вместе с ней вернулся её расход. Замер на 390×844: один и тот же проход прокрутки, по 4 прохода на вариант, 480 кадров в выборке, считаем долю кадров длиннее 20 мс. Hero уменьшается (как на десктопе) 27–28% кадров длиннее 20 мс Hero только сдвигается 32–34% Hero не трансформируется вовсе 17% Вывод неожиданный, но повторяемый: дело не в том, СКОЛЬКО двигать, а в самом факте трансформации. Внутри Hero играет полноэкранное видео, и любая трансформация родителя заставляет браузер заново растеризовать этот слой на каждом кадре — «дешёвого» варианта тут нет. Поэтому на телефоне Hero остаётся неподвижным. Сам наезд от этого никуда не девается: Каталог по-прежнему въезжает скруглённой панелью с тенью, а Hero под ним темнеет до 85% — это и есть то, что читается глазом. Уменьшение на телефоне и без того было всего 8%, на 390 px это 15 px по ширине, и в движении под затемнением его почти не видно. Ровно к тому же выводу приходит комментарий у .tsn-flat выше: у Hero внутри свои прилипающие элементы, и трансформация на родителе им вредна. */ html.tsn-on section.hero.tsn-hold, html.tsn-on section.hero.tsn-hold.tsn-sink{transform:none} } /* ── «Меньше движения»: всё как в v306 ───────────────────────────────── */ @media(prefers-reduced-motion:reduce){ html.tsn-on .tsn-hold{transform:none} html.tsn-on .tsn{border-radius:0;box-shadow:none} html.tsn-on .tsn-veil{display:none} } /* Коробка, у которой скругление и тень наезда рисует что-то внутри неё (горизонтальная лента — на своей прилипающей сцене). Переменная --in на самой коробке остаётся: внутренний слой её и читает. */ html.tsn-on .tsn-bare{border-radius:0;box-shadow:none}