Главная » 2012 » Октябрь » 25 » Изменяющийся текст (Скрипты для ucoz)
25.10.2012, 11:34

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





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

готово!
Материал взят с сайта infoscript.ru
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: Неизвестен
Категория: Скрипты uCoz | Просмотров: 1551 | Добавил: Voker | Рейтинг: 5.0/2 |
Теги: Изменяющийся, текст
Всего комментариев: 2
0  
1 hoster-saitov   (25.10.2012 15:31) [Материал]
Аватар пользователя
Чёткий скрипт)

0  
2 antisept -Infoscript Team-  (28.10.2012 19:18) [Материал]
Аватар пользователя
Хорошая реализация. Держи плюсик smile

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]