Sticky scroll · 2 пункти
Ця сторінка — частина бібліотеки елементів для статей OnLady. Тут — два варіанти sticky-scroll композиції: одна колонка пінується до viewport, інша скролиться повз неї.
Sticky-scroll — найважчий за вагою елемент бібліотеки. Він "схоплює" увагу читача і утримує її на одному кадрі, поки інший контент розгортається у власному темпі. Корисно для brand-stories, look-of-the-day, серії принципів — будь-чого, де хочеться оперувати "наратор + reel".
Обидва варіанти сидять у новому supplementary тирі .col-shell, який симетрично "проривається" з центральної колонки на повну ширину shell (left rail + central + right rail). Нижче 1024px тир згортається до .col-wide, а самі колонки стопляться вертикально — sticky behavior розслабляється до нормального flow.
Текстова колонка завжди має ширину приблизно --w-prose (684 px), щоб залишатися комфортною для читання. Фото-колонка займає рештку. Модифікатор .sticky-scroll--reverse міняє колонки місцями ліво ↔ право — корисно для чергування ритму між двома sticky-scroll блоками поспіль.
01Sticky photos / scrolling text
Фото пінуються ліворуч на повну висоту viewport, а праворуч стек редакційних text-панелей прокручується повз. Використовується для brand-stories, серій принципів, наративів, де кожен короткий блок тексту заслуговує власного моменту біля фіксованого візуального якоря.
Геометрія: 1fr (фото) + --w-prose (текст). Sticky-колонка завжди ліворуч у дефолті — додайте .sticky-scroll--reverse, щоб перевернути.
.col-shell · Sticky photos / scrolling text (#elem-ss-text)
Принцип 1
Мінімалізм — це не відмова від краси
Чисті лінії та нейтральні кольори не означають нудьгу. Навпаки — вони створюють простір, де кожна деталь говорить сама за себе. Один акцент на образ: сумка незвичайної форми, широкий пояс або коштовність із характером.
Найкращі мінімалістичні образи будуються на контрасті фактур: гладкий шовк + грубий льон, м'яке трикотажне — і чітке пальто.
Принцип 2
Колір як висловлювання
Тренд сезону — не яскравий блок-колір, а складний відтінок: перестигла хурма, пил після заходу, зелень мохового каменю. Ці кольори неочевидні, але саме вони "читаються" на вулиці як щось справжнє.
Поєднуйте один такий тон з базою — молочним, вівсяним або dim grey — і образ буде виглядати водночас свіжо і спокійно.
Принцип 3
Пропорції вирішують усе
Широкі плечі + вузький низ або навпаки — вільний верх та облягаючий низ. Сезон не диктує один силует: він дає дозвіл грати. Але правило одне — баланс між об'ємами має бути свідомим, а не випадковим.
Принцип 4
Якість перед кількістю
Дві речі, в яких хочеться виходити щодня, кращі за десять, що пилляться в шафі. Редакція OnLady обрана саме за цим критерієм: кожен предмет — зручний, довговічний і достатньо нейтральний, щоб поєднуватись із тим, що вже є.
Блок вище — дефолтна орієнтація: фото ліворуч, текст праворуч. Додайте .sticky-scroll--reverse, щоб перевернути ліво ↔ право (фото пінуються справа, текст скролиться зліва).
02Sticky text / scrolling photos
Короткий вступний блок тексту пінується ліворуч на висоту viewport, а високий стек product-фото прокручується повз нього праворуч. Читається як "наратор + reel" — для collection round-ups, look-of-the-day spotlight, будь-якого контексту, де один пояснювальний блок обрамляє багато візуалів.
Геометрія дзеркальна до попереднього блока: --w-prose (текст) + 1fr (фото).
.col-shell · Sticky text / scrolling photos (#elem-ss-photos)
Деталі колекції
Речі, які варто розглянути ближче
Кожен виріб у колекції — результат ретельного вибору матеріалу, крою та обробки. Прокрутіть праворуч, щоб побачити деталі.
Ми свідомо обмежили кількість позицій: краще менше, але кожна річ — на рівні.
- Натуральні тканини — льон, бавовна, шовк-мікс
- Усі вироби — пошиті в Україні
- Наявність у розмірах XS–XL
- Безкоштовна доставка від 1500 ₴
Той самий модифікатор .sticky-scroll--reverse працює і тут — застосовуйте, коли фото-колонка має сидіти ліворуч, а sticky-текст справа. Чергуйте дві орієнтації, якщо у вас декілька sticky-scroll блоків поспіль: інакше ритм статті стає одноманітним.
03Підсумок
Два sticky-scroll блоки — text-scroll і photo-scroll — закривають дві базові потреби довгої статті: коли візуал тримає увагу і ви викладаєте кілька думок поспіль, і коли одна думка обрамляє ряд візуалів. Обидва варіанти pure-CSS через position: sticky; жодного scroll-driven JS.
Через свою візуальну вагу sticky-scroll — це елемент "одного моменту". Один такий блок на статтю — нормально; два — близько до межі; три — це вже стиль, а не редакторський прийом. У типовому гайді 7–10 хв читання вистачає одного sticky-scroll, щоб привнести темпоральний контраст.
Для розробників: .col-shell — supplementary тир, спеціально доданий під цей блок. Не використовуйте його для інших елементів без обговорення — він "ламає" сітку статті, і якщо одночасно у Twitter Card preview і RSS-парсингу буде кілька .col-shell-блоків, рендер цих контекстів може повестись непередбачувано.