const phrases = [
"Погода на завтра",
"Новости технологий",
"Рецепты ужина",
"Лучшие фильмы 2025"
];
const input = document.getElementById("story");
const defaultPlaceholder = "Поиск по сайту...";
let phraseIndex = 0;
let charIndex = 0;
let typing = true;
let typingTimeout;
let isFirstRun = true;
function typePhrase() {
if (!typing) return;
if (phraseIndex >= phrases.length) phraseIndex = 0;
const currentPhrase = phrases[phraseIndex];
// Добавляем эффект мигающего курсора в конце текста
const cursor = charIndex % 2 === 0 && charIndex === currentPhrase.length ? "|" : "";
input.placeholder = currentPhrase.slice(0, charIndex) + cursor;
if (charIndex <= currentPhrase.length) {
charIndex++;
typingTimeout = setTimeout(typePhrase, charIndex <= currentPhrase.length ? 100 : 1000);
} else {
typingTimeout = setTimeout(() => {
erasePhrase();
}, 2000); // Пауза с полной фразой 2 секунды
}
}
function erasePhrase() {
if (!typing) return;
if (charIndex > 0) {
charIndex--;
const currentPhrase = phrases[phraseIndex];
input.placeholder = currentPhrase.slice(0, charIndex) + (charIndex % 2 === 0 ? "|" : "");
typingTimeout = setTimeout(erasePhrase, 50); // Быстрое стирание
} else {
phraseIndex = (phraseIndex + 1) % phrases.length;
typingTimeout = setTimeout(typePhrase, 500); // Пауза перед новой фразой
}
}
function stopTyping() {
if (typing) {
typing = false;
clearTimeout(typingTimeout);
input.placeholder = defaultPlaceholder;
}
}
function startTyping() {
if (!typing) {
typing = true;
phraseIndex = 0;
charIndex = 0;
input.placeholder = "";
typePhrase();
}
}
// Обработчики событий
input.addEventListener("mouseover", stopTyping);
input.addEventListener("focus", stopTyping);
input.addEventListener("input", stopTyping);
input.addEventListener("blur", startTyping);
// Запускаем анимацию после небольшой задержки
setTimeout(() => {
if (input === document.activeElement) return;
typePhrase();
}, 1000);
