/* ===================================================================== 04 · АРХИВ СОБЫТИЙ · ВАРИАНТ A — «КАДРЫ ВЫКЛАДЫВАЮТ НА СТОЛ» ┌─ ЧТО ЗДЕСЬ ПРОИСХОДИТ ─────────────────────────────────────────────┐ │ Снимок приходит на лист чуть крупнее, с заметным поворотом и с │ │ большой мягкой тенью — он ещё в воздухе. Пока прокрутка идёт, он │ │ садится: масштаб возвращается к единице, поворот успокаивается до │ │ 1–2°, тень поджимается до той едва заметной, какую даёт бумага на │ │ бумаге. Так рука кладёт фотографию на стол. │ └────────────────────────────────────────────────────────────────────┘ ОДНА ПЕРЕМЕННАЯ НА ВСЁ: --p, «насколько кадр уже лёг», 0…1. --p = 1 кадр лежит на месте ← ЗНАЧЕНИЕ ПО УМОЛЧАНИЮ --p = 0 кадр ещё в руке Значение по умолчанию выбрано так, а не наоборот, СОЗНАТЕЛЬНО и это главное решение файла. Разворот собран без единой строчки скрипта: выключен JS, упал JS, вкладка в фоне, спокойный режим — на листе всё равно лежит готовая композиция. Скрипт умеет ровно одно — временно опустить --p ниже единицы и вернуть обратно. Ни у одного элемента нет opacity: 0 в исходном состоянии. ДВА TRANSFORM РАЗВЕДЕНЫ ПО РАЗНЫМ СЛОЯМ: .stage--arh .shot__deal — выкладка, идёт за прокруткой, БЕЗ transition; .stage--arh .shot__lift — отклик на курсор, С transition. Если повесить оба на один элемент, переход отклика начнёт тормозить выкладку, и кадр поедет за колесом с задержкой в полсекунды. ЧТО НЕ ИСПОЛЬЗУЕТСЯ: скругления, градиенты кроме красного, 3D, blur, подложки. Тень одна и она честная — тень листа, лежащего на листе; в полёте она больше, на бумаге почти пропадает. ===================================================================== */ .scene--arh { aspect-ratio: 1440 / 1268; min-height: calc(100vw * 1268 / 1440); } .stage--arh { --edge-r: 73px; /* правое поле, зеркально левому */ --lead-w: 1.8; /* толщина подписного жеста — как в блоке 02 */ --cap-fs: 14px; /* подписной кегль архива, см. ниже */ --cap-lh: 19px; } .stage--arh .paper { left: 18px; top: 18px; width: calc(100% - 36px); height: calc(100% - 36px); } .stage--arh .grain { left: 18px; top: 18px; width: calc(100% - 36px); height: calc(100% - 36px); } /* --------------------------------------------------------------------- КОЛОНТИТУЛ И ГРУППОВАЯ ПОДПИСЬ Со слэшем — нумерует раздел, набран мельче и вполсилы: у этой строки нет предмета. Без слэша — называет, набран в полную силу чернил. --------------------------------------------------------------------- */ .folio { left: var(--edge-text); top: 60px; font-size: 13px; line-height: 18px; opacity: 0.62; } .cap { font-size: var(--caption-fs); line-height: var(--caption-lh); z-index: 6; } /* Групповая подпись: относится ко ВСЕМ кадрам сразу, прижаться ни к одному не может — поэтому и получает черту. Единственная выноска на развороте: у отдельных кадров подписи прижаты и графика им не нужна. */ .cap--all { left: var(--edge-text); top: 92px; } .lead { z-index: 5; overflow: visible; pointer-events: none; } .lead path { fill: none; stroke: var(--red); stroke-width: var(--lead-w); stroke-linecap: round; stroke-linejoin: round; /* Черта дорисовывается вместе с началом выкладки. По умолчанию --lp = 1: без скрипта она нарисована целиком. */ stroke-dasharray: var(--len, 660); stroke-dashoffset: calc(var(--len, 660) * (1 - var(--lp, 1))); } /* .lead--all удалена 05.09 вместе с разметкой — см. index.html. */ /* --------------------------------------------------------------------- КАДР .shot — коробка в координатах листа. НЕ двигается никогда: по ней считаются нахлёсты и к ней прижата подпись. .shot__deal — выкладка. .shot__lift — отклик на курсор. --------------------------------------------------------------------- */ .stage--arh .shot { overflow: visible; /* подпись выходит за нижнюю кромку */ z-index: var(--z, 1); } .stage--arh .shot__deal { position: absolute; inset: 0; transform-origin: 50% 50%; /* Три составляющих посадки. При --p = 1 все три обнуляются и остаётся только --a1 — тот лёгкий наклон, с каким фотография лежит на столе. */ transform: translate(calc(var(--dx, 0px) * (1 - var(--p, 1))), calc(var(--dy, 0px) * (1 - var(--p, 1)))) rotate(calc((var(--a1, 0) + (var(--a0, 0) - var(--a1, 0)) * (1 - var(--p, 1))) * 1deg)) scale(calc(1 + var(--gain, 0.16) * (1 - var(--p, 1)))); will-change: transform; } .stage--arh .shot__lift { position: absolute; inset: 0; overflow: hidden; /* кадр растёт внутри своей кромки */ background: var(--bg); transform: translateY(var(--hy, 0px)) rotate(calc(var(--ha, 0) * 1deg)) scale(var(--hs, 1)); transform-origin: 50% 50%; /* ТЕНЬ ЛИСТА, лежащего на листе. Одна на весь блок и единственная тень в проекте. В полёте (--p → 0) она больше и мягче, на бумаге (--p = 1) её почти не видно — 2px смещения и 10% чернил. */ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.10); box-shadow: 0 calc(2px + 15px * (1 - var(--p, 1))) calc(5px + 26px * (1 - var(--p, 1))) rgba(0, 0, 0, calc(0.10 + 0.13 * (1 - var(--p, 1)))); transition: transform 0.42s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.42s ease; } .stage--arh .shot__img { width: 100%; height: 100%; object-fit: cover; /* Фотографии всегда ч/б; цвет наливается только под курсором. */ filter: grayscale(1) contrast(1.04); transition: filter 0.55s ease; } /* ВСЕ ПРАВИЛА .shot ОГРАНИЧЕНЫ СВОЕЙ СЦЕНОЙ (.stage--arh) И ЭТО ВАЖНО. Класс .shot занят дважды: здесь это карточка кадра с откликом на курсор, а в блоке «Повод» — сама фотография. Пока правила стояли голыми, `.shot:hover { z-index: 30 }` срабатывало и в «Поводе»: фотография поднималась выше колонки с ценой (слой 3) и накрывала её. Выглядело как «текст пропадает при наведении и возвращается при отводе». Новые правила для .shot писать только со сценой впереди. */ /* --- ОТКЛИК НА КУРСОР ------------------------------------------------- ТЗ просит наклон, увеличение и подпись. Подпись здесь стоит всегда (она часть системы подписей, а не всплывающая плашка), поэтому на курсор остаётся жест: кадр приподнимается, доворачивается в ту же сторону, в какую уже наклонён, и наливается цветом. Соседи уходят под него — z-index поднимается только у того, на кого смотрят. data-hover — та же роль, но выставляется адресом (?hover=g): в headless-браузере :hover не воспроизвести, а снимок нужен. -------- */ .stage--arh .shot:hover, .stage--arh .shot[data-hover] { z-index: 30; } .stage--arh .shot:hover .shot__lift, .stage--arh .shot[data-hover] .shot__lift { --hs: 1.045; --hy: -7px; --ha: var(--ah, 1.6); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.20); } .stage--arh .shot:hover .shot__img, .stage--arh .shot[data-hover] .shot__img { filter: grayscale(0) contrast(1.02) saturate(1.04); } /* --- ПОДПИСЬ КАДРА ---------------------------------------------------- ПРАВИЛО ПРОЕКТА: подпись прижата к кромке СВОЕГО кадра — 12px под нижней кромкой, выключка по левой. Прижатой подписи выноска не нужна, и её здесь нет ни у одной из восьми. Кегль 14/19 — свой для этого блока и один на все восемь подписей. 16px, как в блоке 02, здесь встаёт поперёк композиции: восемь двухстрочных подписей основным подписным кеглем читаются как второй разворот текста поверх фотографического. Разница ролей держится не кеглем, а слэшем: «/ 04 — архив» нумерует, «свадьба» называет. Подпись живёт СНАРУЖИ летящих слоёв: она не летает с кадром, а печатается, когда кадр уже лёг. Отсюда порог 0.7 — печать начинается на последней трети посадки. При --p = 1 (значение по умолчанию) формула даёт 1.02, то есть полную непрозрачность. ------------------ */ .stage--arh .shot__cap { position: absolute; left: 0; top: calc(100% + 12px); font-size: var(--cap-fs); line-height: var(--cap-lh); white-space: nowrap; opacity: calc((var(--p, 1) - 0.7) * 3.4); transform: translateY(calc(7px * (1 - var(--p, 1)))); } /* Заглушки. Тип события известен, город и число гостей — нет. Линейка красная, как в блоке 03; что именно вписать, говорит data-verify — оно проявляется на ?dev=1. */ .slot { display: inline-block; width: 58px; height: 0.6em; margin: 0 5px; border-bottom: 1.6px solid var(--red); vertical-align: baseline; } .slot--n { width: 30px; } html[data-dev] .slot { position: relative; } html[data-dev] .slot::after { content: attr(data-verify); position: absolute; left: 0; bottom: -14px; font-family: var(--font-ui); font-size: 9px; letter-spacing: 0; text-transform: none; color: var(--red); white-space: nowrap; } /* --------------------------------------------------------------------- КООРДИНАТЫ РАЗВОРОТА (система 1440) Левое поле 73 и правое 73 — те же, что на первом экране. Один кадр уходит под правый обрез: приём взят из блока 02, чтобы разворот не выглядел выставкой в рамке. z-index идёт ТЕМ ЖЕ СЧЁТОМ, ЧТО И ОЧЕРЕДЬ ВЫКЛАДКИ: кто лёг позже — тот сверху. Поэтому нахлёсты настоящие, а не нарисованные, и порядок на листе читается как порядок раскладывания. --------------------------------------------------------------------- */ /* 1 · крупная панорама, левый верх */ .stage--arh .shot--a { left: 73px; top: 138px; width: 560px; height: 372px; --z: 1; } .stage--arh .shot--a .shot__img { object-position: 50% 36%; } /* 2 · ложится поверх правого края крупного (нахлёст 23px) */ /* Правый край держится КРОМКИ БУМАГИ, а не кромки сцены. Бумага лежит с полем 18 (18…1422), а кадр стоял до 1440 и вылезал на белое поле страницы. Ещё пять пикселей забирает поворот 1.4°: угол кадра выходит дальше его стороны. 1131 + 286 + 5 = 1422. */ .stage--arh .shot--b { left: 1131px; top: 138px; width: 286px; height: 386px; --z: 2; } /* 3 · кадр правее. Увеличен в 1.17 раза от своего центра (было 196×262 в точке 648,152; 1.3 показалось много, ужат на 10%) — те же 2:3, обрезка кадра не поехала. */ .stage--arh .shot--c { left: 632px; top: 130px; width: 230px; height: 307px; --z: 3; } .stage--arh .shot--c .shot__img { object-position: 46% 34%; } /* 4 · уходит под правый обрез листа (1152 + 288 = 1440) */ .stage--arh .shot--d { left: 901px; top: 181px; width: 288px; height: 192px; --z: 4; } .stage--arh .shot--d .shot__img { object-position: 50% 42%; } /* 5 · второй крупный, правый низ — с него начинается нижняя половина */ /* top 624, а не 600: на 600 подпись кадра b («свадьба · … гостей», она тянется до x≈820) упиралась в левую кромку этого кадра, а под курсором он ещё и подрастает и накрывал её. 24px развели пару. */ .stage--arh .shot--g { left: 660px; top: 430px; width: 340px; height: 452px; --z: 5; } .stage--arh .shot--g .shot__img { object-position: 50% 30%; } /* 6 · ложится поверх правого края второго крупного (нахлёст 26px) */ /* Тот же случай, что у кадра f: исходник 2:3, коробка была почти квадратной и срезала снимок сверху и снизу. 250×375 — те же 2:3. */ .stage--arh .shot--h { left: 1075px; top: 515px; width: 250px; height: 375px; --z: 6; } .stage--arh .shot--h .shot__img { object-position: 50% 44%; } /* 7 · возвращаемся к левому полю */ .stage--arh .shot--e { left: 73px; top: 536px; width: 262px; height: 350px; --z: 7; } /* 8 · последним ложится тот, что заходит на край седьмого (нахлёст 23px) */ /* КАДР ЦЕЛИКОМ, БЕЗ ОБРЕЗКИ. Исходник 1200×1800 (2:3), а коробка была 430×286 — от снимка оставалась треть по высоте. Габарит переведён в те же 2:3, поэтому object-fit: cover совпадает с кадром один в один и не режет ничего. Увеличен в 1.05 раза от своего центра (было 260×390 в точке 385,514; 1.5 показалось много, ужат на 30%) — пропорция та же. */ .stage--arh .shot--f { left: 378px; top: 505px; width: 273px; height: 410px; --z: 8; } .stage--arh .shot--f .shot__img { object-position: 50% 38%; } /* --------------------------------------------------------------------- РУКОПИСЬ Denistina комментирует и никогда не подписывает кадр — значит, выноски у неё нет и быть не может. Приходит последней, когда весь разворот уже лежит. По умолчанию --hp = 1: без скрипта видна сразу. --------------------------------------------------------------------- */ /* Ограничено своей сценой: имя .note занято ещё тремя блоками (события, заявка, футер), а правило красит текст в рукописный красный и ставит nowrap — в чужом блоке это ломает вёрстку. */ .stage--arh .note { color: var(--red-hand); line-height: 1.5; white-space: nowrap; z-index: 6; opacity: var(--hp, 1); } .stage--arh .note--more { left: 100px; top: 918px; font-size: 58px; transform: rotate(-4deg); } /* Нижних полос у блока нет с 05.09 — заказчица убрала их из разметки. Правила удалены следом: пустой селектор на несуществующий элемент только сбивает с толку того, кто будет считать высоту блока. */ /* ===================================================================== СПОКОЙНЫЙ РЕЖИМ Никакой выкладки: разворот лежит собранным с первого кадра. Отклик на курсор оставлен, но без движения — только цвет: «цвет наливается под курсором» это язык блока, а не анимация. Скрипт в этом режиме не заводит ни прокрутку, ни rAF (см. a.js). ===================================================================== */ @media (prefers-reduced-motion: reduce) { .stage--arh .shot { --p: 1 !important; } .stage--arh .shot__lift { transition: none; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.10); } .stage--arh .shot:hover .shot__lift, .stage--arh .shot[data-hover] .shot__lift { --hs: 1; --hy: 0px; --ha: 0; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.10); } .stage--arh .shot__cap { opacity: 1; transform: none; } .lead path { stroke-dashoffset: 0; } .note { opacity: 1; } } /* ===================================================================== ПОДПИСИ ПОД КАДРАМИ УБРАНЫ 05.09 по решению Оксаны. Под каждым кадром стояла пара «тип события + пустое место под число гостей». На листе из восьми кадров это восемь одинаковых строк, и читались они не подписями, а бланком, который забыли заполнить. Правило стоит последним в файле намеренно: выше есть два правила .stage--arh .shot__cap (координаты и въезд), их не трогаем — вернуть подписи можно снятием этой одной строки. ===================================================================== */ .stage--arh .shot__cap { display: none; } /* --- КОПИЯ СКВОЗНОЙ ЛИНИИ, ЛЕЖАЩАЯ ПОД КАДРАМИ ---------------------- Стоит сразу за бумагой и ниже всех кадров: у .shot z-index от 1 до 8, у неё 0. Габарит равен viewBox один к одному, поэтому масштаб 1:1 и координаты совпадают с листом; высота сцены на это не влияет. --- */ .stage--arh .thread-under { position: absolute; left: 0; top: 0; width: 1440px; height: 1041px; z-index: 0; overflow: visible; pointer-events: none; }