Изменяющийся текст

2798
5.6 из 10
Проголосовало: 9






Интересный пример создания изменяющихся слов. То есть, сначала было одно слово, после на его месте появилось другое и так далее. Этот самый пример изменения слов будем создавать без применения 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>


Соответственно, если поняли, изменяться будут слова, под классом rw-words, то есть вместо слова слово 1 вместо него появится слово 2, и так далее по кругу.

CSS

Сначала украсим заголовок, если он будет вам нужен:

Code
.rw-sentence span{
  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; /* Цвет ссылок */
}


Теперь что с анимацией. Если задать одну и ту же анимацию просто тегу <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;  
}


А так же параметры анимации под все браузеры:

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; }
}


готово!
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
  • Всего комментариев: 3

mohito93
0
mohito93 написал: Написано 29 Октября 2012 в 20:01
Комментарий №1
Демо можно? smile

Вовчик
0
Вовчик написал: Написано 29 Октября 2012 в 20:02
Комментарий №2
нет smile

Quote
То есть, сначала было одно слово, после на его месте появилось другое и так далее

mohito93
0
mohito93 написал: Написано 29 Октября 2012 в 20:24
Комментарий №3
Я понял
biggrin

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2118
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • Marishka написал:
  • Можете добавить свои input поля, но сохраняйте их порядок в html для правильного сохранения и вывода.
  • Marishka написал:
  • Новая версия 1.3 (+6 новых станций):
    Установка:
    Демо: Перейти
  • Marishka написал:
  • Доп 8 станций:
    Код
    <div class="mSt"><p>Tropical</p><div data="2/trop_64">64</div><br><div data="2/trop_128">128</div><br><div data="2/trop_320">320</div></div>  
      <div class="mSt"><p>Нафталин FM</p><div data="2/naft_64">64</div><br><div data="2/naft_128">128</div><br><div data="2/naft_320">320</div></div>  
      <div class="mSt"><p>Rave FM</p><div data="2/rave_64">64</div><br><div data="2/rave_128">128</div><br><div data="2/rave_320">320</div></div>  
      <div class="mSt"><p>Gold</p><div data="2/gold_64">64</div><br><div data="2/gold_128">128</div><br><div data="2/gold_320">320</div></div>  
      <div class="mSt"><p>GOA/PSY</p><div data="2/goa_64">64</div><br><div data="2/goa_128">128</div><br><div data="2/goa_320">320</div></div>  
      <div class="mSt"><p>Minimal/Tech</p><div data="2/mini_64">64</div><br><div data="2/mini_128">128</div><br><div data="2/mini_320">320</div></div>  
      <div class="mSt"><p>House</p><div data="2/fut_64">64</div><br><div data="2/fut_128">128</div><br><div data="2/fut_320">320</div></div>  
      <div class="mSt"><p>Megamix</p><div data="2/mix_64">64</div><br><div data="2/mix_128">128</div><br><div data="2/mix_320">320</div></div>


    Fix работы радио:
    Находим: if(radUrl=="tm" || radUrl=="ps" || radUrl=="teo" || radUrl=="dc")
    Меняем на: if (radUrl == "tm" || radUrl == "ps" || radUrl == "teo" || radUrl == "dc" || radUrl == "gop")
  • CbIPoK2513 написал:
  • Мой вариант выдаёт аватарку картинкой, а не текстом.
  • waak написал:
  • и ещё забыл добавить что использую модуль каталог сайтов
    Последние темы
    Опрос
    258
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 3
    Гостей: 2
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: