#фишка дня

Рукописи не горят! А веб-сайты?

У нас уже был пример сгорающего попапа от Ксении Кондрашовой. Но ей, определённо, было этого мало :)

Итак, встречайте, великолепный пример сочетания шейдеров и анимаций GSAP, а конкретно — GSAP ScrollTrigger: https://codepen.io/ksenia-k/full/GRLqZVR

Впечатляющая работа.

#webgl #animation #shader #scroll

#codepen дня

Если doomscrolling — то только такой!

https://codepen.io/cobra_winfrey/pen/oNOMRav

Работает только в браузерах, поддерживающих Scroll Timeline API. Это пока только Chrome, Canary и за флагом. Ну и полифиллы.

#css #scroll #animation

#фишка дня

Одна из знаменитых проблем Safari на iOS — это утечка скролла. Условно говоря, показали вы модалку, скроллите её — а фон тоже скроллится. В Safari 16, впрочем, проблема была решена.

Тем не менее, модалками и overflow: hidden поведением проблемы со скроллом в разных браузерах не ограничиваются.

Например, скролл в любом плавающем или просто переполненном элементе очень даже протекает наружу, в итоге скроллите вы колесом (или пальцем) textarea, доходите до конца — и начинает прокручиваться остальной документ.

Я устал придумывать синонимы слову скроллить.

Так вот, уже достаточно давно существует свойство overscroll-behavior. Оно позволяет не только запретить цепочку событий прокрутки, но и отменить пограничные эффекты!

MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior

Демо: https://mdn.github.io/css-examples/overscroll-behavior/

Наиболее популярный и, для кого-то, раздражающий эффект окончания прокрутки — это пружинка. Именно поэтому я записываю демо из Safari, чтобы сразу стало понятно, о чём речь.

Ах да, Safari... как обычно, поддержка только-только появилась, с 16 версии. До того приходилось мучаться.

В любом случае, свойство очень удобное, пользуемся.

#css #scroll #overscroll #бородач

#codepen дня

Если в CSS есть встроенные фильтры, наверное, можно и редактор картинок сделать?

И таки да, можно.

Если в CSS есть (где-то, впрочем, только планируется) анимация по скроллу, наверное, на её основе можно делать элементы-ползунки?

И таки да, можно.

Зная всё это, можно ли на (почти) чистом CSS сделать фоторедактор?

Да!

https://codepen.io/paulnoble/pen/bGyNRNE

JS тут используется буквально для того, чтобы зарегистрировать CSS-переменные как анимируемые. Ну и добавить drag-возможности для десктопа.

Забавно, что при всех этих возможностях у нас так и нет нормального API для получения картинки из DOM-ноды...

#css #filters #scroll

#фишка дня

Накидали секций, поставили к ним якоря, поставили ссылки вида #anchorName в навигацию, включили scroll-behavior: smooth; чтобы плавненько все было и...

...и ваша секция уехала под шапку ко всем чертям. Что же делать?

Спокойно. Есть три варианта.
1. Если ты живешь в 2012, можно подвинуть якорь вверх с помощью position: relative и отрицательного top. Или всячески играть полями. Но мы живем в 2024, так что...
2. scroll-padding-top на html (а часто, на родителя секций) или...
3. scroll-margin-top на любую из секцию, за которой якорь закреплен.

В чем отличие 2 от 3?

Ну, очевидно, в области применения. Разом на всех во 2 случае или индивидуально в 3.

Важно понимать, что на обычный скролл это не распространяется. Только якоря или snap: https://getpublii.com/blog/one-line-css-solution-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header.html

#css #scroll #snap #anchor #бородач

#codepen дня

На WWDC24 Apple похвастались тем, что на SwiftUI теперь можно создавать параллакс-галереи буквально несколькими строчками кода.

Но мы же с вами все знаем, что Web намного круче, как платформа. Мы тоже так умеем!

Правда, только в Chrome...

Ведь у нас есть CSS-переменные и Scroll Timeline API, который мы рассматривали вот тут, даже с полифиллом: https://yangx.top/htmlshit/621

Итак, вашему вниманию конфигурируемая параллакс-галерея от Джея: https://codepen.io/jh3y/pen/XWwzYZo

Весь JS там — это часть универсальной панели управления, чтобы задавать параметры.

#css #scroll #animation

#игра дня

Ну, различного рода лабиринты и Tower Defence на чистом CSS мы видели. Все требуют использования мыши, поскольку по чекбоксам надо кликать.

В принципе, можно и табом с пробелом, но не то...

Итак, встречайте: первая игра на чистом CSS, в которой можно использовать стрелочки с клавиатуры! Автор — Темани Афиф, знакомый нам по CSS-фигурам.

Помоги Марио собрать все монетки!

Построена на использовании Scroll Timeline API и, соответственно, голова Марио — не что иное, как пересечение "лифтов" скроллбаров. И мышью (ну ок, тачпадом) игра проходится даже легче.

https://codepen.io/t_afif/full/OJYbVWP

Делитесь вашими скриншотами с лучшим временем :)

#css #scroll #game

#ссылка дня

Уже известный нам Ван Дамм, который Брамус, не так давно присоединился к команде деврелов Google Chrome. В какой роли?

Конечно же в роли евангелиста анимаций по скроллу! Кто бы мог подумать :)

Я уже ссылался на его работы и ранее, но теперь всё серьёзно.

Итак, под брендом Chrome for Developers (это вообще отличный проект, занимающий нишу чуть иную, нежели MDN) Брамус выпустил серию видео для обучения анимаций по скроллу в CSS.

Вот: https://developer.chrome.com/blog/scroll-driven-animations-video-course

Ну или ссылка сразу на плейлист: https://www.youtube.com/playlist?list=PLNYkxOF6rcICM3ttukz9x5LCNOHfWBVnn

И не только обучению, но и паре трюков! Например, определение направления скролла или срабатывание только один раз.

Учитывая, что Scroll Timeline API уже используются даже в Airbnb (пруф), счастливое будущее не за горами!

#css #scroll #animation

#расширение дня

В дополнение к недавнему посту про курс Брамуса Ван-Дамма посвящённого CSS-анимациям по скроллу, хотелось бы приложить его расширение для Chrome, позволяющее их отлаживать.

На иллюстрации, например, отладка всё того же проекта AirBnb: https://www.airbnb.com/release

Ссылка на расширение находится на сайте, посвящённом скролл-анимациям вообще, что само по себе максимально полезно: https://scroll-driven-animations.style/

Интересный подход, мне нравится.

#css #scroll #animation

#фишка дня

Одна из знаменитых проблем Safari на iOS — это утечка скролла. Условно говоря, показали вы модалку, скроллите её — а фон тоже скроллится. В Safari 16, впрочем, проблема была решена.

Тем не менее, модалками и overflow: hidden поведением проблемы со скроллом в разных браузерах не ограничиваются.

Например, скролл в любом плавающем или просто переполненном элементе очень даже протекает наружу, в итоге скроллите вы колесом (или пальцем) textarea, доходите до конца — и начинает прокручиваться остальной документ.

Я устал придумывать синонимы слову скроллить.

Так вот, уже достаточно давно существует свойство overscroll-behavior. Оно позволяет не только запретить цепочку событий прокрутки, но и отменить пограничные эффекты!

MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior

Демо: https://mdn.github.io/css-examples/overscroll-behavior/

Наиболее популярный и, для кого-то, раздражающий эффект окончания прокрутки — это пружинка. Именно поэтому я записываю демо из Safari, чтобы сразу стало понятно, о чём речь.

Ах да, Safari... как обычно, поддержка только-только появилась, с 16 версии. До того приходилось мучаться.

В любом случае, свойство очень удобное, пользуемся.

#css #scroll #overscroll #бородач

#codepen дня

Как всегда, немного настоящего будущего. На днях я сидел и думал, как было бы круто повторить анимацию по скроллу, которую много-много лет назад мы в студии делали для одного рекламного агентства.

Но там всё было просто: перехват события колёсика/тачпада и перенос на горизонтальное движение. Да, мы были настолько ленивы, что даже не стали имитировать скроллбар на первом экране. Всем хватило, все довольны.

Но вот на дворе 2024 год, появились нативные CSS-анимации по скроллу. Да, пока только в Chrome и Firefox за флагом, но, опять же, знай свою аудиторию! Да и полифиллы есть :)

В общем, великолепная Ана Тюдор и её демо с горизонтальной анимацией по вертикальному скроллу: https://codepen.io/thebabydino/pen/WNqJXXa

И секрет тут прост: position: sticky, 100vh и немного магии через animation-timeline, который мы когда-то уже обозревали.

Короче, моё демо теперь тоже не за горами :)

#css #scroll #animation

#заметка дня

Представим, что вам нужно акцентировать внимание на элементе. Элементе формы, скажем. Например, вывести его в область зрения пользователя. Какие есть варианты?

Очевидно, focus. Ведь для этого и предназначено. Вот только focus ведёт себя непредсказуемо в разных браузерах: в Chrome и Safari элемент выводится на центр экрана, а Firefox — до минимально необходимого уровня, суть — вниз. А ещё всё это происходит резко.

Решение проблемы — передача запрета скролла в метод focus и вызов scrollIntoView вместо этого.

Таким образом можно программно доскроллить до любого элемента, не только формы. И не только в центр экрана, но и по заданному отступу.

А ещё можно передать параметр, отвечающий за вид прокрутки: behavior. Итого, behavior: smooth подвинет элемент к нам плавно. Правда, для Safari и IE придётся подключать полифилл (см. комментарий в примере).

Итого, получаем: https://codepen.io/alinaki/pen/mdPwdxy

Мой пример — дополненный оригинальный от Smashing Magazine: https://twitter.com/smashingmag/status/1299325085111783425

Ещё близкое к реальности применение — скролл по секциям: https://codepen.io/aaroniker/pen/WNNLRYb

#css #scroll #scrollintoview #js #focus #бородач

#фишка дня

Пишешь чат или выводишь данные лога в консоль и хочешь чтобы каждое новое сообщение снизу было видимым?

Ни слова больше! Спека has us covered: https://drafts.csswg.org/css-scroll-snap/#example-d0a2d86f

Удивительное дело, конечно, видеть примеры прямо в черновике спецификации :)

Вот, кстати, пример от Брамуса Ван Дамма (опять и снова, да): https://codepen.io/bramus/pen/PorRORd

Обратите внимание, за нас подумали, что пользователь может поскроллить наверх.

Работает везде, но иногда проявляется баг с пружинящим скроллом — Chrome теряет событие и "снапит" нас назад. Впрочем, не всегда.

Ну если вы за старое доброе решение на JavaScript, вот, держите хук от Vercel.

#scroll #snap #css

#игра дня

Ну, различного рода лабиринты и Tower Defence на чистом CSS мы видели. Все требуют использования мыши, поскольку по чекбоксам надо кликать.

В принципе, можно и табом с пробелом, но не то...

Итак, встречайте: первая игра на чистом CSS, в которой можно использовать стрелочки с клавиатуры! Автор — Темани Афиф, знакомый нам по CSS-фигурам.

Помоги Марио собрать все монетки!

Построена на использовании Scroll Timeline API и, соответственно, голова Марио — не что иное, как пересечение "лифтов" скроллбаров. И мышью (ну ок, тачпадом) игра проходится даже легче.

https://codepen.io/t_afif/full/OJYbVWP

Делитесь вашими скриншотами с лучшим временем :)

#css #scroll #game

#инструмент дня

Кому адекватной современной виртуализации списков?

Как-то так повелось, что задача отрисовки десятков, и даже сотен тысяч строк или ячеек на экране решается... волнами. Появляется решение, принимается всеми, а потом — буквально забрасывается. И вот мы годами ждём обновления того же react-window просто чтобы получить возможность рендерить строки разной высоты из коробки. А react-window сам по себе был и является рекомендованной заменой react-virtualized.

В других фреймворках и ванильных средах ситуация ещё веселее.

При этом разработчики, например, мобильных приложений на тех же Flutter и SwiftUI в принципе лишены этой проблемы, просто потому что им надо заботиться о рендере элементов самостоятельно, заранее объявляя, что тут должен быть скролл. Насильная виртуализация, так сказать.

Если вы были застигнуты врасплох моими утверждениями и не понимаете вообще, о чём я, то вкратце поясню: чтобы дать возможность человеку поскроллить тысячи и сотни тысяч объектов на экране, совсем не обязательно отрисовывать их все разом. Можно отрисовать штук 10-20 строк, заполнив экран, и просто переиспользовать эти элементы раз за разом. Виртуальные списки, буквально.

Итак, для чего я всё это пишу? А вот: вашему вниманию предъявляется универсальная библиотека виртуализации списков virtua.

GitHub: https://github.com/inokawa/virtua

Умеет в динамические высоты строк из коробки! Умеет в бесконечный скролл. Умеет занимать всю высоту окна. Умеет в RSC.

Ну и не ограничивается одним только React: Vue, Solid и Svelte тоже поддерживаются.

Отличное современное решение.

#scroll #virtual

#ссылка дня

Адам Аргайл (Adam Argyle) — деврел в команде Google Chrome — уже давно в своём блоге https://nerdy.dev/ ведёт раздел Nerdy Notebook. Собирает разные техники создания компонентов и эффектов.

И одно из последних обновлений там — это большой сборник эффектов появления по скроллу! ScrollAnimation API в CSS: https://nerdy.dev/notebook/scroll-driven-animations.html

z-stack вариант шикарный вообще.

Ну и, естественно, есть описание техники.

Нелишним будет напомнить, что работает ScrollAnimation API пока только в Chrome и Safari TP. Но работа идёт!

#css #scroll

#статья дня

...ну и #инструмент дня к ней заодно.

Где-то с месяц назад в блоге Chrome появилась интересная запись, посвящённая... каруселям изображений в CSS

Которые почему-то в русскоязычном пространстве все с чьей-то подачи называют слайдерами...

И на самом деле, это не самодеятельность Chrome! Это целый новый черновик спецификации: CSS Overflow Module 5.

Из интересного:
- кнопки пред-след aka ::scroll-button
- маркеры слайдов и страниц aka ::scroll-marker
- автоматическая разбивка на страницы
- выделение активного слайда и затенение остальных

Естественно, поддерживается пока только в Chrome со 135 версии и прочих Blink-браузерах.

Но выглядит интересно! Собственно, обещанный конструктор: https://chrome.dev/carousel-configurator/

Учитывая, что карусели изображений подходят только для, хм, изображений и ни один нормальный дизайнер в здравом уме не станет запихивать в карусели важную информацию (её не увидят, это факт), внедрение этой функциональности в браузеры чтобы перестать подгружать сотни килобайт скриптов выглядит разумно.

Ну и фоллбек до обычной прилепленной прокрутки aka scroll snap никто не отменял.

Ваши мысли, котаны? Имеет смысл ждать это в Safari и Firefox?

#css #scroll #gallery #carousel

#codepen дня

Кому в детстве нравилось крутить в руках всякие цепочки и кисточки для велосипедов?

Сегодня ваш шанс вспомнить то самое чувство!

Очередной прекрасный пример анимации по скроллу от Stijn Van Minnebruggen (я хз как произнести, это что-то из Евротура)

Тут: https://codepen.io/donotfold/pen/ZYYYJRV

Работает в Chrome и Safari TP.

Кто переведёт на GSAP? Он, кстати, недавно официально бесплатным стал, даже для коммерческого использования.

#css #scroll #animation

#фишка дня

Использование position: sticky уже так-то стало обыденностью.

А что если можно было бы обращаться к элементам прилипшего родителя и что-то странное с ними вытворять?

Так можно! Для этого у нас буквально не так давно появились скролл-запросы, как часть контейнерных запросов. Так и называются: Container scroll-state queries.

Например, хотите сделать картинку в картинке? Ну, чтобы, например, не блокировать чтение статьи?

Или, наоборот, не прерывать просмотр рекламы? :)

Запросто: https://codepen.io/alinaki/pen/WbvMOPB

@container scroll-state(stuck: top) {
  .pip {
    width: 200px;
    transform: translate(-50%, 0%)
      translate(calc(50vw - (50% + 1rem)), calc(100vh - (100% + 1rem)));
  }
}

Обратите внимание, translate можно складывать, получая интересную математику в итоге :)

А для браузеров, которые в скролл-запросы пока не умеют, всегда можно написать короткий IntersectionObserver (он, кстати, есть в примере).

#css #scroll #state

#заметка дня

На связи glebcha, который иногда с большим удовольствием предлагает идеи новых статей автору канала (старому другу) и, с недавнего времени, пишет сам в канал.

Недавно появилась интересная задача - отображать список вкладок редактора вне области скролла как в любом редакторе кода, например в IDEA.

Сразу же составил список технологий себе в помощь и в их списке оказалось событие scrollend для более эффективного формирования списка вкладок вне области прокрутки.

И вроде бы все отлично, но как обычно "есть один нюанс"....и это Safari. Ссылка на активный баг.

Но не стоит расстраиваться, решение нашлось в виде полифилла (не идеального, но отличного).

Проверяйте доступности браузерного api перед использованием и помните - "нет нереализуемых задач, всё лишь вопрос мотивации и времени".

P.S.
Напишите если вам интересны более хардкорные заметки по разработке редактора SQL-запросов в нашей команде CedrusData.

#safari #scroll #scrollend