Заметный по своей анимации эффект анимационного текста, где только используем таблицы стилей CSS. Такую анимацию можно применять для привлечение внимание, что больше всего для этого создана.
Сам эффект работает в таком направление, где по вверх пишем ключевое слово, и в низу также можно написать. А вот по центру будет меняться текст, который еще идет на цветном фоне. Это у каждого ключевого слово изначально задана своя палитра.
HTML
Код
<div id=kegaremedes>
На сайте
<div id=saighogard-mesabukod>
<div><div>Скрипты</div></div>
<div><div>Шаблоны</div></div>
<div><div>Дизайн</div></div>
</div>
ZORNET.RU
</div>
CSS
Код
#kegaremedes {
color:#989292;
text-transform: uppercase;
font-size:36px;
font-weight:bold;
padding-top:200px;
position:fixed;
width:100%;
bottom:45%;
display:block;
}
#saighogard-mesabukod {
height:50px;
overflow:hidden;
}
#saighogard-mesabukod > div > div {
color:#fff;
padding:4px 12px;
height:45px;
margin-bottom:45px;
display:inline-block;
}
#saighogard-mesabukod div:first-child {
animation: show 5s linear infinite;
}
#saighogard-mesabukod div div {
background:#42c58a;
}
#saighogard-mesabukod div:first-child div {
background:#4ec7f3;
}
#saighogard-mesabukod div:last-child div {
background:#DC143C;
}
@keyframes show {
0% {margin-top:-270px;}
5% {margin-top:-180px;}
33% {margin-top:-180px;}
38% {margin-top:-90px;}
66% {margin-top:-90px;}
71% {margin-top:0px;}
99.99% {margin-top:0px;}
100% {margin-top:-270px;}
}
На этом вся установка, как можно заметить, что не чего сложного в установке нет, главное по уму расположить такой эффект на интернет ресурсе.
Демонстрация
