Здесь вы можете оригинально подойти к описанию текста, это может название сайта или заголовок, который заключается в сбой знаков, которые представлены в тексте. Где изначально мы наблюдаем различные знаки, что не прочесть, да и вообще не понять, что написано. Но через несколько секунд все настраивается, что отлично отображает данное название, что изначально мы написали.
Эффект при открытие страницы:
После некого момента все корректно наблюдается:
Установка:
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);
Демонстрация
