Как сделать так, чтобы анимация css проигрывалась только после скролла на этот блок?
Есть анимация
@keyframes rev-img {
0% {
width: 0%;
}
50% {
width: 7%;
}
100% {
width: 17%;
}
}
Нужно, чтобы она запускалась не сразу после загрузки, а только, когда объект, попадает в поле зрения, ну когда пользователь скроллит до блока, где должна быть анимация. Возможно ли это сделать с помощью какого нибудь скрипта в javascpript?
Вполне возможно.
1. Слушатель на скролл корневого документа
2. Внутри слушателя - проверка высоты скролла, сравнение ее с позицией блока. Если мы проскроллили больше, чем высота блока, то блок видимый (на экране)
3. Когда блок стал видимым, добавляем ему класс, на который завязана анимация
4. При необходимости, когда блок уходит за границы экрана, класс можно убрать, чтоб анимация повторялась
Простой
