Будущее CSS-анимаций — scroll-timeline, animation-timeline и animation-range, JS больше не нужен!

Опубликовано: 11 Март 2024
на канале: Александр Ламков — Friendly Frontend

9,132

832

✏️ Изучаем Scroll-driven Animations API — применяем новые CSS-свойства scroll-timeline, view-timeline, animation-timeline и animation-range на практических примерах.

🔴 Timeline:
▶ 00:00 | Введение
▶ 00:30 | Стандартное поведение анимации
▶ 01:30 | Отслеживание скролла — свойство scroll-timeline (scroll-timeline-name, scroll-timeline-axis)
▶ 02:51 | Свойство animation-timeline
▶ 04:19 | Прогресс скролла страницы
▶ 05:19 | Фиксированная (”липкая”) шапка с анимацией при скролле вниз
▶ 06:08 | Свойство animation-range
▶ 07:10 | Плавное появление элементов при скролле
▶ 08:00 | Свойств view-timeline-name
▶ 09:00 | Другие возможности Scroll-driven Animations API
▶ 09:13 | Заключение

📚 Ссылки:
➖ Scroll-driven Animations примеры: https://scroll-driven-animations.style/

💬 Чат в телеграмме (помощь новичкам):
https://t.me/friendlyFrontendChat

🔸 Boosty (поддержать канал):
https://boosty.to/friendly-frontend

🗂️ Бесплатные курсы на канале:
🟠 HTML:    • HTML курс 2024
🔵 CSS:    • CSS курс 2024
🟡 JS:    • JavaScript курс 2024
🟢 A11y:    • Accessibility курс 2024
⚪️ Мастер-класс по верстке для новичков:    • Верстка Kropp Fitness (HTML, CSS)
🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS):    • Верстка Positivus (HTML, БЭМ, SCSS)
🗺 Frontend Roadmap 2024    • Frontend Roadmap 2024 | Что должен уч...

📌 Автор:
➖ Личный сайт: https://aleksanderlamkov.ru/
➖ Telegram: https://t.me/friendlyFrontend
➖ Boosty: https://boosty.to/friendly-frontend
➖ GetMentor: https://getmentor.dev/mentor/aleksand...
➖ Solvery: https://solvery.io/mentor/aleksanderl...

#frontend #фронтенд #css