Анимация текста Typing Carousel
Источник: ruseller.com, codepen.io
[html]
<link href="https://fonts.googleapis.com/css?family=Raleway:200,100,400" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet">
<script src="https://forumstatic.ru/files/0012/6c/79/44604.js"></script>
<div class="text1">ForumD.ru - это
<span
class="txt-rotate"
data-period="4000"
data-rotate='[ "бесплатная техподдержка.", "изготовление дизайна для вашего проекта.", "конкурсы и акции.", "постоянно пополняющийся каталог скриптов.", "каталог бесплатных дизайнов для форумов." ]'></span>
</div>
<div class="text2">Вы еще не с нами?</div>
<div class="text3"><span class="byte"><a href="https://forumd.ru">ForumD.ru</a></span> - это
<span
class="txt-rotate"
data-period="4000"
data-rotate='[ "бесплатная техподдержка.", "изготовление дизайна для вашего проекта.", "конкурсы и акции.", "постоянно пополняющийся каталог скриптов.", "каталог бесплатных дизайнов для форумов." ]'></span>
</div>
<div class="text4">Вы еще не с нами?</div>
<style>
.info {font-family: Cambria;
font-size: 18px;
color: black;}
.info a:link, .info a:visited, .info a:active {font-family: Cambria;
font-size: 18px;
color: blue;}
.text1, .text2, .text3, .text4 {
font-weight: 200;
margin: 0.4em 0;
}
.text1, .text3 { font-size: 1.5em;
font-family: Raleway;}
.text2 {
color: #888;
font-size: 1,2em;
}
.text4 {
color: #888;
font-size: 1.6em;
font-family: Caveat;}
.text3 a:link, .text1 a:visited, .text1 a:active {font-family: 'Pacifico', sans-serif;
font-size: 2em;
color: #000;
text-decoration: none;}
</style>
[/html]
Возникшие у вас вопросы по установке данного скрипта или стилизации текста для него, можно задать в этой теме.
Надеюсь эффект вам понравился.
