Подсветка текста в момент подскрола к нему
Нашёл интересный завлекающий эффект на чистом CSS. Задача следующая: нужно привлечь внимание пользователя на конкретную фразу в тексте, когда эта фраза появляется во вьюпорте. Для всяких лендингов и интерактивных статей — топ.
Крис Койер нашёл пример решения задачи на GSAP и переделал его на CSS Scroll-Driven Animation.
1. Создаём простую анимацию заполнения фона фразы при помощи изменения
2. Добавляем
3. Уточняем границы внутри вьюпорта, которые являются 0% и 100% для анимации:
4.
Работать будет только в Chrome и хромоподобных браузерах, но для других браузеров можно подключить тот самый GSAP-плагин, который упоминается в статье. И хотя бы в Chrome будет значительная экономия трафика.
https://frontendmasters.com/blog/highlight-text-when-a-user-scrolls-down-to-that-piece-of-text/
Нашёл интересный завлекающий эффект на чистом CSS. Задача следующая: нужно привлечь внимание пользователя на конкретную фразу в тексте, когда эта фраза появляется во вьюпорте. Для всяких лендингов и интерактивных статей — топ.
Крис Койер нашёл пример решения задачи на GSAP и переделал его на CSS Scroll-Driven Animation.
1. Создаём простую анимацию заполнения фона фразы при помощи изменения
background-size от 0 до 100%. Залить можно градиентом. Или, например, можно сделать эффект подчёркивания текста, суть та же. Саму фразу выделяем каким-нибудь тегом вроде mark.2. Добавляем
animation-timeline: view();. Этим мы говорим браузеру, чтобы он вместо временной оси использовал позицию скролла. Причём по умолчанию привязываем 0% к появлению элемента во вьюпорте, 100% — к исчезновению из него.3. Уточняем границы внутри вьюпорта, которые являются 0% и 100% для анимации:
animation-range: contain 0% contain 25%;. Теперь заканчиваться анимация будет уже на 25% движения внутри вьюпорта.4.
animation-iteration-count: 1; — вызываем эффект всего один раз.Работать будет только в Chrome и хромоподобных браузерах, но для других браузеров можно подключить тот самый GSAP-плагин, который упоминается в статье. И хотя бы в Chrome будет значительная экономия трафика.
https://frontendmasters.com/blog/highlight-text-when-a-user-scrolls-down-to-that-piece-of-text/