|
Новые пользователи
|
Активные пользователи
|
Изменяющийся текст
 |
Добавил: Liga
Категория: Скрипты для Ucoz
Просмотров: 320
Мне нравится 0 |
Описание: Интересный пример создания изменяющихся слов. То есть, сначала было одно слово, после на его месте появилось другое и так далее. Этот самый пример изменения слов будем создавать без применения JS, на чистом HTML CSS, где основа будет CSS анимация.
Установка:
HTML:
Code
<div class="rw-sentence">
<span>Заголовок, если надо</span>
<div class="rw-words">
<span>слово 1</span>
<span>слово 2</span>
<span>слово 3</span>
<span>слово 4</span>
</div>
</div>
<span>Заголовок, если надо</span>
<div class="rw-words">
<span>слово 1</span>
<span>слово 2</span>
<span>слово 3</span>
<span>слово 4</span>
</div>
</div>
Соответственно, если поняли, изменяться будут слова, под классом rw-words, то есть вместо слова слово 1 вместо него появится слово 2, и так далее по кругу.
CSS:
Сначала украсим заголовок, если он будет вам нужен:
Code
.rw-sentence span{
color: #3B86F8; /* Цвет текста */
font-size: 30pt; /* Размер шрифта */
}
color: #3B86F8; /* Цвет текста */
font-size: 30pt; /* Размер шрифта */
}
Теперь переходим к самим изменяющимся словам.
Code
rw-words span{
position: absolute; /* Позиционирование */
opacity: 0; /* Отсутствие прозрачности */
overflow: hidden; /* Все лишние будет удалено */
width: 100%; /* Ширина */
color: #A4A5A4; /* Цвет текста */
}
.rw-words span a{
color: #A4A5A4; /* Цвет ссылок */
}
position: absolute; /* Позиционирование */
opacity: 0; /* Отсутствие прозрачности */
overflow: hidden; /* Все лишние будет удалено */
width: 100%; /* Ширина */
color: #A4A5A4; /* Цвет текста */
}
.rw-words span a{
color: #A4A5A4; /* Цвет ссылок */
}
Теперь что с анимацией. Если задать одну и ту же анимацию просто тегу <span> , то слова будут просто напросто накладываться друг на друга. Поэтому, придется использовать псевдокласс :nth-child, а так же задавать вручную параметры времени, когда включать анимацию.
Code
.rw-words span{
-webkit-animation: rotateWordsSecond 18s linear infinite 0s;
-moz-animation: rotateWordsSecond 18s linear infinite 0s;
-o-animation: rotateWordsSecond 18s linear infinite 0s;
-ms-animation: rotateWordsSecond 18s linear infinite 0s;
animation: rotateWordsSecond 18s linear infinite 0s;
}
.rw-words span:nth-child(2) {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}
.rw-words span:nth-child(3) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.rw-words span:nth-child(4) {
-webkit-animation-delay: 9s;
-moz-animation-delay: 9s;
-o-animation-delay: 9s;
-ms-animation-delay: 9s;
animation-delay: 9s;
}
-webkit-animation: rotateWordsSecond 18s linear infinite 0s;
-moz-animation: rotateWordsSecond 18s linear infinite 0s;
-o-animation: rotateWordsSecond 18s linear infinite 0s;
-ms-animation: rotateWordsSecond 18s linear infinite 0s;
animation: rotateWordsSecond 18s linear infinite 0s;
}
.rw-words span:nth-child(2) {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-o-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}
.rw-words span:nth-child(3) {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.rw-words span:nth-child(4) {
-webkit-animation-delay: 9s;
-moz-animation-delay: 9s;
-o-animation-delay: 9s;
-ms-animation-delay: 9s;
animation-delay: 9s;
}
А так же параметры анимации под все браузеры:
Code
@-webkit-keyframes rotateWordsSecond {
0% { opacity: 1; -webkit-animation-timing-function: ease-in; width: 0px; }
10% { opacity: 0.3; width: 0px; }
20% { opacity: 1; width: 100%; }
27% { opacity: 0; width: 100%; }
100% { opacity: 0; }
}
@-moz-keyframes rotateWordsSecond {
0% { opacity: 1; -moz-animation-timing-function: ease-in; width: 0px; }
10% { opacity: 0.3; width: 0px; }
20% { opacity: 1; width: 100%; }
27% { opacity: 0; width: 100%; }
100% { opacity: 0; }
}
@-o-keyframes rotateWordsSecond {
0% { opacity: 1; -o-animation-timing-function: ease-in; width: 0px; }
10% { opacity: 0.3; width: 0px; }
20% { opacity: 1; width: 100%; }
27% { opacity: 0; width: 100%; }
100% { opacity: 0; }
}
@-ms-keyframes rotateWordsSecond {
0% { opacity: 1; -ms-animation-timing-function: ease-in; width: 0px; }
10% { opacity: 0.3; width: 0px; }
20% { opacity: 1; width: 100%; }
27% { opacity: 0; width: 100%; }
100% { opacity: 0; }
}
@keyframes rotateWordsSecond {
0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
10% { opacity: 0.3; width: 0px; }
20% { opacity: 1; width: 100%; }
27% { opacity: 0; width: 100%; }
100% { opacity: 0; }
}
0% { opacity: 1; -webkit-animation-timing-function: ease-in; width: 0px; }
10% { opacity: 0.3; width: 0px; }
20% { opacity: 1; width: 100%; }
27% { opacity: 0; width: 100%; }
100% { opacity: 0; }
}
@-moz-keyframes rotateWordsSecond {
0% { opacity: 1; -moz-animation-timing-function: ease-in; width: 0px; }
10% { opacity: 0.3; width: 0px; }
20% { opacity: 1; width: 100%; }
27% { opacity: 0; width: 100%; }
100% { opacity: 0; }
}
@-o-keyframes rotateWordsSecond {
0% { opacity: 1; -o-animation-timing-function: ease-in; width: 0px; }
10% { opacity: 0.3; width: 0px; }
20% { opacity: 1; width: 100%; }
27% { opacity: 0; width: 100%; }
100% { opacity: 0; }
}
@-ms-keyframes rotateWordsSecond {
0% { opacity: 1; -ms-animation-timing-function: ease-in; width: 0px; }
10% { opacity: 0.3; width: 0px; }
20% { opacity: 1; width: 100%; }
27% { opacity: 0; width: 100%; }
100% { opacity: 0; }
}
@keyframes rotateWordsSecond {
0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
10% { opacity: 0.3; width: 0px; }
20% { opacity: 1; width: 100%; }
27% { opacity: 0; width: 100%; }
100% { opacity: 0; }
}
Автор:Неизвестен
Теги материала: Отсутствуют
Вход на сайт
Мини-чат
Популярные файлы
Последний скрипт
Последний скрипт
 | Скрипт информера - команда сайта для Ucoz |
Новое на форуме
Последние комментарии
Администрация не несёт ответственности за содержащие файлы на данном портале.
Все материалы на сайте принадлежат исключительно их владельцам!
Хостинг от uCoz
Все материалы на сайте принадлежат исключительно их владельцам!
Хостинг от uCoz
