#заметка дня

CSS очень хочет заменить JS в декларативном описании реакции интерфейса на действия пользователя.

Очень хочет, страшно старается, но пока что получается так себе. Тем не менее, плавный скроллинг до якоря, наконец, можно сделать. Ну и меню, пожалуй.

Ну ладно, анимации по наведении и клику ещё. А по скроллу?

Вы не поверите, тоже можно! Ну, почти.

Но обо всём по порядку. Заметка здоровая, будет две части.

Давайте сначала набросаем простой пример: пользователь прокручивает блоки и в определённые моменты начинают выезжать панели. Не просто появляются, а реагируют на положение полосы прокрутки. Проще показать уже: https://codepen.io/alinaki/pen/LYWVeBV

Для упрощения демонстрации каждая секция занимает целый экран, но можете мне поверить, приведённый пример будет работать даже в случае, когда у вас секций много и они разной высоты. Если интересно, как такие вещи рассчитываются — пишите в @htmlshitchat ваши комментарии, попробую после разложить немного геометрии.

Отдельно хочу заметить, что лет пять назад Safari останавливал event loop на время прокрутки страницы. Приведённая техника просто бы не заработала!

Да, инженеры Apple таким образом очень хитро решили уменьшить энергопотребление своего браузера.

Но на любую гайку найдётся свой хитрый болт, и тогда таким болтом стал... requestAnimationFrame! Неожиданно, не правда ли? И всё ещё актуально если анимации очень тяжёлые!

Итак, секрет в том, что мы запускаем запрос кадра и внутри него слушаем всё тот же window.pageYOffset.

Почему его? Потому что document.documentElement.scrollTop тогда в Safari не обновлялся, вспоминаем остановленный event loop.

И вот выходит рабочий вариант: https://codepen.io/alinaki/pen/QWpwXNN

У него есть одна достаточно серьёзная проблема, попробуйте отгадать, какая. Но она очень и очень легко решается.

А через пару дней мы с вами проделаем то же самое на самых современных API 😉 И тогда я поясню, что же такое имелось в виду в самом начале заметки.

#css #js #scroll #animation