• Страница 1 из 1
  • 1
Форум » Веб-разработка » Коды сайта HTML » Интересный эффект сбоя текста на JS + CSS (Оригинальный эффект про сбой и настройку текста)
Интересный эффект сбоя текста на JS + CSS
Kosten
Дата: Суббота, 2021-05-15, 20:34 | Сообщение 1
Оффлайн
Администраторы
Сообщений:36965
Награды: 65


Здесь вы можете оригинально подойти к описанию текста, это может название сайта или заголовок, который заключается в сбой знаков, которые представлены в тексте. Где изначально мы наблюдаем различные знаки, что не прочесть, да и вообще не понять, что написано. Но через несколько секунд все настраивается, что отлично отображает данное название, что изначально мы написали.

Эффект при открытие страницы:



После некого момента все корректно наблюдается:



Установка:

HEAD

Код
<script src="https://cdn.jsdelivr.net/npm/baffle@0.3.6/dist/baffle.min.js"></script>

HTML

Код
<main>
  <section class="beautiful-indicator">
    <h3 class="adeklomusa">ZorNet.Ru — сайт для вебмастера</h3>
  </section>
</main>

CSS

Код
section{
    width: 100%;
    min-height: 100vh;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background: #1d1d1d;
}
.adeklomusa{
  font-size: 30px;
  letter-spacing: 1px;
  text-align: center;
  text-transform: Uppercase;
}

JS

Код
const text = baffle(".adeklomusa");
text.set({
    characters: "█▓█ ▒░/▒░ █░▒▓/ █▒▒ ▓▒▓/█ ░█▒/ ▒▓░ █<░▒ ▓/░>",
    speed: 120
});
text.start();
text.reveal(4000);

Демонстрация
Прикрепления: 3328641.png(9.6 Kb) · 3463610.png(8.8 Kb) · css-text-glitch.zip(3.4 Kb)
Страна: (RU)
Kosten
Дата: Суббота, 2021-05-15, 21:48 | Сообщение 2
Оффлайн
Администраторы
Сообщений:36965
Награды: 65


Текстовая анимация с появление понятного описание

Этот текст очень похожий по своему эффекту, что думаю расположить его на этой теме, где можно выбрать именно тот эффект который больше вам нравится с появление знаков в последующий текст.



HEAD

Код
<script src="https://cdn.jsdelivr.net/npm/baffle@0.3.6/dist/baffle.min.js"></script>

HTML

Код
<div class="agudsa-molina">
  <p class="kibuda">ZorNet.Ru - website for webmaster</p>
</div>

CSS

Код
.agudsa-molina {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
p{
  font-family: 'VT323', monospace;
  font-size:48px;
  font-weight:500;
  color:white;
}

JS

Код
const text = baffle('.kibuda');
text.set({
  characters: '!/|~#.^+*$#%nwf',
  speed: 100
});
text.start();
text.reveal(2000);

На этом установка завершена.

Демонстрация
Прикрепления: 2448091.png(6.4 Kb) · text-reveal-css.zip(3.1 Kb)
Страна: (RU)
Форум » Веб-разработка » Коды сайта HTML » Интересный эффект сбоя текста на JS + CSS (Оригинальный эффект про сбой и настройку текста)
  • Страница 1 из 1
  • 1
Поиск: