[html]<div style="text-align: center;">
<font face="ClickClack" size="30" style="font-size: 30px; color: #3c322b; letter-spacing: 1px; display: inline-block;" id="typewriterText"></font>
</div>
<script>
const text = "ТЕКУЩАЯ ИГРОВАЯ ДАТА";
const container = document.getElementById('typewriterText');
let i = 0;
let isDeleting = false;
// Храним позиции для каждой буквы (фиксированные, чтобы не дёргались при каждом обновлении)
let positions = [];
function generatePositions(length) {
const newPositions = [];
for (let j = 0; j < length; j++) {
// Очень маленькое смещение: -1, 0, или +1 (редко)
const offset = Math.floor(Math.random() * 3) - 1; // -1, 0, или 1
newPositions.push(offset);
}
return newPositions;
}
function updateDisplay() {
if (i === 0) {
container.innerHTML = '';
return;
}
const currentText = text.substring(0, i);
let html = '';
for (let j = 0; j < currentText.length; j++) {
const char = currentText[j];
// Для пробела не применяем смещение
if (char === ' ') {
html += `<span style="display: inline-block;"> </span>`;
} else {
const offset = positions[j] || 0;
// Очень мягкое смещение с плавным переходом
html += `<span style="display: inline-block; transform: translateY(${offset}px); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);">${char}</span>`;
}
}
container.innerHTML = html;
}
function typeWriterEffect() {
if (!isDeleting && i < text.length) {
// Печатаем новую букву — обновляем позиции для всех напечатанных букв
if (i + 1 <= text.length) {
positions = generatePositions(i + 1);
}
i++;
updateDisplay();
setTimeout(typeWriterEffect, 140);
}
else if (!isDeleting && i === text.length) {
isDeleting = true;
setTimeout(typeWriterEffect, 2000);
}
else if (isDeleting && i > 0) {
i--;
updateDisplay();
setTimeout(typeWriterEffect, 80);
}
else if (isDeleting && i === 0) {
isDeleting = false;
positions = [];
setTimeout(typeWriterEffect, 1500);
}
}
// Запускаем анимацию
typeWriterEffect();
</script>[/html]
[html]<div style="text-align: center;">
<font face="ClickClack" size="20" style="font-size: 30px; color: #3c322b; letter-spacing: 1px; display: inline-block;" id="typewriterText"></font>
</div>
<script>
const text = "1 СЕНТЯБРЯ - 31 ДЕКАБРЯ 2024 ГОДА";
const container = document.getElementById('typewriterText');
let i = 0;
let isDeleting = false;
// Храним позиции для каждой буквы (фиксированные, чтобы не дёргались при каждом обновлении)
let positions = [];
function generatePositions(length) {
const newPositions = [];
for (let j = 0; j < length; j++) {
// Очень маленькое смещение: -1, 0, или +1 (редко)
const offset = Math.floor(Math.random() * 3) - 1; // -1, 0, или 1
newPositions.push(offset);
}
return newPositions;
}
function updateDisplay() {
if (i === 0) {
container.innerHTML = '';
return;
}
const currentText = text.substring(0, i);
let html = '';
for (let j = 0; j < currentText.length; j++) {
const char = currentText[j];
// Для пробела не применяем смещение
if (char === ' ') {
html += `<span style="display: inline-block;"> </span>`;
} else {
const offset = positions[j] || 0;
// Очень мягкое смещение с плавным переходом
html += `<span style="display: inline-block; transform: translateY(${offset}px); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);">${char}</span>`;
}
}
container.innerHTML = html;
}
function typeWriterEffect() {
if (!isDeleting && i < text.length) {
// Печатаем новую букву — обновляем позиции для всех напечатанных букв
if (i + 1 <= text.length) {
positions = generatePositions(i + 1);
}
i++;
updateDisplay();
setTimeout(typeWriterEffect, 140);
}
else if (!isDeleting && i === text.length) {
isDeleting = true;
setTimeout(typeWriterEffect, 2000);
}
else if (isDeleting && i > 0) {
i--;
updateDisplay();
setTimeout(typeWriterEffect, 80);
}
else if (isDeleting && i === 0) {
isDeleting = false;
positions = [];
setTimeout(typeWriterEffect, 1500);
}
}
// Запускаем анимацию
typeWriterEffect();
</script>[/html]
сплаттерпанк | 21+












