<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Текстовая анимация</title>
<style>
/* Стили для текста */
.scramble-text {
font-size: 54px;
color: #000;
text-align: center;
padding: 20px;
font-weight: 600;
display: inline-block;
/* Убедитесь, что шрифт задается в вашем сайте, например: */
font-family: inherit; /* Сохраняем шрифт родителя */
}
/* Стили для анимированного текста */
.scramble-char {
color: #000; /* Цвет шрифта */
}
</style>
</head>
<body>
<!-- Блок, где будет отображаться анимированный текст -->
<div class="scramble-text">Интернет маркетинг для вашего бизнеса</div>
<script>
class TextScramble {
constructor(el) {
this.el = el;
this.chars = '!<>-_\\/[]{}—=+*^?#________';
this.update = this.update.bind(this);
this.text = this.el.textContent;
}
setText(newText) {
const oldText = this.el.textContent;
const length = Math.max(oldText.length, newText.length);
const promise = new Promise((resolve) => this.resolve = resolve);
this.queue = [];
// Создаем массив для каждой буквы
for (let i = 0; i < length; i++) {
const from = oldText[i] || '';
const to = newText[i] || '';
const start = Math.floor(Math.random() * 40);
const end = start + Math.floor(Math.random() * 40);
this.queue.push({ from, to, start, end });
}
cancelAnimationFrame(this.frameRequest);
this.frame = 0;
this.update();
return promise;
}
update() {
let output = '';
let complete = 0;
for (let i = 0, n = this.queue.length; i < n; i++) {
let { from, to, start, end, char } = this.queue[i];
if (this.frame >= end) {
complete++;
output += `<span class="scramble-char">${to}</span>`; // Оборачиваем букву в span
} else if (this.frame >= start) {
if (!char || Math.random() < 0.28) {
char = this.randomChar();
this.queue[i].char = char;
}
output += `<span class="scramble-char">${char}</span>`; // Добавляем случайный символ
} else {
output += `<span class="scramble-char">${from}</span>`; // Оставляем текущий символ
}
}
this.el.innerHTML = output; // Обновляем только содержимое текста
if (complete === this.queue.length) {
this.resolve();
} else {
this.frameRequest = requestAnimationFrame(this.update);
this.frame++;
}
}
randomChar() {
return this.chars[Math.floor(Math.random() * this.chars.length)];
}
}
// Фразы для анимации
const phrases = [
'Интернет маркетинг для вашего бизнеса',
'Сайты и интернет-магазины',
'Реклама в интернете',
'Чат-боты для мессенджеров',
'Интеграции CRM-систем',
'Брендинг',
'UX/UI-дизайн'
];
const el = document.querySelector('.scramble-text');
const fx = new TextScramble(el);
let counter = 0;
const next = () => {
fx.setText(phrases[counter]).then(() => {
setTimeout(next, 3000);
});
counter = (counter + 1) % phrases.length;
};
next();
</script>
</body>
</html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Текстовая анимация</title>
<style>
/* Стили для текста */
.scramble-text {
font-size: 54px;
color: #000;
text-align: center;
padding: 20px;
font-weight: 600;
display: inline-block;
/* Убедитесь, что шрифт задается в вашем сайте, например: */
font-family: inherit; /* Сохраняем шрифт родителя */
}
/* Стили для анимированного текста */
.scramble-char {
color: #000; /* Цвет шрифта */
}
</style>
</head>
<body>
<!-- Блок, где будет отображаться анимированный текст -->
<div class="scramble-text">Интернет маркетинг для вашего бизнеса</div>
<script>
class TextScramble {
constructor(el) {
this.el = el;
this.chars = '!<>-_\\/[]{}—=+*^?#________';
this.update = this.update.bind(this);
this.text = this.el.textContent;
}
setText(newText) {
const oldText = this.el.textContent;
const length = Math.max(oldText.length, newText.length);
const promise = new Promise((resolve) => this.resolve = resolve);
this.queue = [];
// Создаем массив для каждой буквы
for (let i = 0; i < length; i++) {
const from = oldText[i] || '';
const to = newText[i] || '';
const start = Math.floor(Math.random() * 40);
const end = start + Math.floor(Math.random() * 40);
this.queue.push({ from, to, start, end });
}
cancelAnimationFrame(this.frameRequest);
this.frame = 0;
this.update();
return promise;
}
update() {
let output = '';
let complete = 0;
for (let i = 0, n = this.queue.length; i < n; i++) {
let { from, to, start, end, char } = this.queue[i];
if (this.frame >= end) {
complete++;
output += `<span class="scramble-char">${to}</span>`; // Оборачиваем букву в span
} else if (this.frame >= start) {
if (!char || Math.random() < 0.28) {
char = this.randomChar();
this.queue[i].char = char;
}
output += `<span class="scramble-char">${char}</span>`; // Добавляем случайный символ
} else {
output += `<span class="scramble-char">${from}</span>`; // Оставляем текущий символ
}
}
this.el.innerHTML = output; // Обновляем только содержимое текста
if (complete === this.queue.length) {
this.resolve();
} else {
this.frameRequest = requestAnimationFrame(this.update);
this.frame++;
}
}
randomChar() {
return this.chars[Math.floor(Math.random() * this.chars.length)];
}
}
// Фразы для анимации
const phrases = [
'Интернет маркетинг для вашего бизнеса',
'Сайты и интернет-магазины',
'Реклама в интернете',
'Чат-боты для мессенджеров',
'Интеграции CRM-систем',
'Брендинг',
'UX/UI-дизайн'
];
const el = document.querySelector('.scramble-text');
const fx = new TextScramble(el);
let counter = 0;
const next = () => {
fx.setText(phrases[counter]).then(() => {
setTimeout(next, 3000);
});
counter = (counter + 1) % phrases.length;
};
next();
</script>
</body>
</html>
“
Более 15 лет мы занимаемся созданием уникального дизайна и креативных IT-решений. Мы специализируемся на дизайне сайтов, рекламе в интернете, разработке чат-ботов и других IT-проектах. Мы понимаем, как digital-опыт влияет на восприятие бренда и превращается в впечатления, которые остаются с пользователями.
The Team teachable
Graphic experimentation as a process of visual communication and problem-solving.
LARQ style guide
An identity for LARQ cosmetics. Case studies and a brand book. May 2021.
