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


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

2683
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 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
  • Winston888 написал:
  • Если бы я не добавлял бесплатные адаптации или скрипты бесплатно я бы наверное не стал бы комментировать ваш материал.
    Последние темы
    Опрос
    203
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 3
    Гостей: 2
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: