Красивый и простой по своим действиям анимация для текста, которое появляется при открытие сайта или перезагрузки. Ведь сама анимация с эффектом заключается в том, что идет печатаный текста, где вы сами задаете скорость. Сам анимационный эффект заключается на стильной анимации при задействование текста HTML, CSS и JS.
Пример появление знаков:
Установка:
HEAD
Код
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
HTML
Код
<div class="opisaniye-smorodin"></div>
CSS
Код
html {
height: 100%;
}
body {
display: flex;
height: 100%;
background-color: #2b2828;
}
.opisaniye-smorodin {
margin: auto;
color: white;
font: 700 normal 2.5em 'tahoma';
text-shadow: 5px 2px #242525, 2px 4px #282829, 3px 5px #151515;
}
JS
Код
var words = ['Интересные решения для вебмастера в создание'],
part,
i = 0,
offset = 0,
len = words.length,
forwards = true,
skip_count = 0,
skip_delay = 15,
speed = 70;
var wordflick = function () {
setInterval(function () {
if (forwards) {
if (offset >= words[i].length) {
++skip_count;
if (skip_count == skip_delay) {
forwards = false;
skip_count = 0;
}
}
}
else {
if (offset == 0) {
forwards = true;
i++;
offset = 0;
if (i >= len) {
i = 0;
}
}
}
part = words[i].substr(0, offset);
if (skip_count == 0) {
if (forwards) {
offset++;
}
else {
offset--;
}
}
$('.opisaniye-smorodin').text(part);
},speed);
};
$(document).ready(function () {
wordflick();
});
Описание прописываем в прикрепленном JS, которое идет большим описанием или заголовком.
Демонстрация
