Для реализации анимации написания текста внутри div только когда он находится в видимой области окна браузера, вы можете использовать JavaScript EventListener для отслеживания события прокрутки страницы. При достижении вашего div видимой области, вы можете запустить анимацию.
Пример кода:
```javascript
const textToAnimate = document.querySelector('.text-to-animate');
const windowHeight = window.innerHeight;
function isElementInViewport(el) {
const rect = el.getBoundingClientRect();
return (
(rect.top >= 0 && rect.top <= windowHeight) ||
(rect.bottom >= 0 && rect.bottom <= windowHeight)
);
}
function animateTextOnScroll() {
if (isElementInViewport(textToAnimate)) {
// запуск анимации написания текста
textToAnimate.classList.add('animate-text');
window.removeEventListener('scroll', animateTextOnScroll);
}
}
window.addEventListener('scroll', animateTextOnScroll);
```
Чтобы настроить скрипт JavaScript, чтобы функция прокрутки вызывалась только один раз, вы можете добавить `window.removeEventListener('scroll', animateTextOnScroll);` внутри условия, которое проверяет, виден ли ваш div. Это позволит удалить EventListener после того, как анимация уже запущена, и она больше не будет вызываться повторно при прокрутке страницы.
Надеюсь, это поможет!