ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Изменяющиеся слова при помощи CSS3

Изменяющиеся слова при помощи CSS3

Идея заключается в том, чтобы имея какое-то предложение и повернуть часть его определенным способом, будь то выплывание слева, простое появление или падение. Мы будем "обменивать" некоторые слова этого предложения с использованием CSS-анимации. Можно создать название и под него описать краткое описание, и что то похоже на слайдер, только в нашем случай все на одном месте будет меняться. Сам эффект смотрится красиво и для сайта будет информация. В том, что можно описать категорий или вывести модуле и описать что вы можете найти на сайте.

PS - все создано на чистых стилях, что означает, это красота вывода и грузить не будет.

Установка в 2 этапа:

Разметка

Код

<div class="rw-wrapper">
<h2 class="rw-sentence">
<span>«Madeas studio»</span>
<div class="rw-words rw-words-1">
<span>часть 1</span>
<span>часть 2</span>
<span>часть 3</span>
<span>часть 4</span>
<span>часть 5</span>
<span>часть 6</span>
</div>
<div class="rw-words rw-words-2">
<span>, продолжение 1 </span>
<span>, продолжение 2 </span>
<span>, продолжение 3 </span>
<span>, продолжение 4 </span>
<span>, продолжение 5 </span>
<span>, продолжение 6 </span>
</div>
</h2>
</div>

CSS

Код

.rw-wrapper{
  width: 80%;
  position: relative;
  margin: 110px auto 0 auto;
  font-family: 'Bree Serif';
  padding: 10px;
}
.rw-sentence{
  margin: 0;
  text-align: left;
  text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.rw-sentence span {
  display: block;
  color: #444;
  white-space: nowrap;
  font-size: 200%;
  font-weight: normal;
}
.rw-words{
  display: inline;
  text-indent: 10px;
}
.rw-words span{
  position: absolute;
  opacity: 0;
  overflow: hidden;
  width: 100%;
  color: #6b969d;
}
.rw-words-1 span{
  animation: rotateWordsFirst 18s linear infinite 0s;
}
.rw-words-2 span{
  line-height:150px;
  animation: rotateWordsSecond 18s linear infinite 0s;
}
.rw-words span:nth-child(2) {
  animation-delay: 3s;
  color: #6b889d;
}
.rw-words span:nth-child(3) {
  animation-delay: 6s;
  color: #6b739d;
}
.rw-words span:nth-child(4) {
  animation-delay: 9s;
  color: #7a6b9d;
}
.rw-words span:nth-child(5) {
  animation-delay: 12s;
  color: #8d6b9d;
}
.rw-words span:nth-child(6) {
  animation-delay: 15s;
  color: #9b6b9d;
}
@keyframes rotateWordsFirst {
  0% { opacity: 1; animation-timing-function: ease-in; height: 0px; }
  8% { opacity: 1; height: 60px; }
  19% { opacity: 1; height: 60px; }
  25% { opacity: 0; height: 60px; }
  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; }
}

Готово!

Способы применения могут быть абсолютно разные! Всё зависит от вашего воображения! Надеюсь скрипт кому-нибудь пригодится.

DEMO

13 Ноября 2016 Просмотров: 2001 Комментариев: (14)

Поделиться в социальных сетях

Материал разместил

iMadeas

Похожие материалы

Оставь свой отзыв

Комментарии: 14
Порядок вывода комментариев: Start 13 Ноября 2016 23:10¹ 0 Ничоси... Kosten 13 Ноября 2016 23:14³ 0 Start, сам говорю в первые такую анимацию вижу, это так можно описать много, и главное красиво смотрится. Kosten 13 Ноября 2016 23:13² 0 Интересная анимация, в первые такую встречаю, так как что то похоже на слайдер, только с названием и описанием. Kolinkor 13 Ноября 2016 23:18⁴ 0 Но это точно уникальный материал, а что ссылку нельзя добавить, просто когда показывается название и если тебя заинтересовало, чтоб по клику перейти. Или просто это больше к рекламе своего сайта относится, но как можно посмотреть, и на темный и светлый нормально подойдет. FeStemBer 13 Ноября 2016 23:22⁵ 0 Что то не сильно пойму, как заметил, что iMadeas заливает под один дизайн, хотелось под паблики больше. Не чего против, но просто не думаю что такой скрипт подойдет к примеру на этот сайт. Kosten 13 Ноября 2016 23:28⁶ +1 Не вижу не чего, если поставить на этот сайт, главное чтоб подошел и по теме стоял. А если под стандарт заливать, но должно быть какое то разнообразие, здесь все по скриптам стильно смотрится. FeStemBer 13 Ноября 2016 23:33⁷ 0 Не спорю, что можно поставить и правильно, чтоб по теме все было. Так то вообще это софт сайты, но есть и интернет магазины и вообще дизайн, что и не подумаешь, что на юкоз, вот как не DEMO который показан. Сафрон 13 Ноября 2016 23:36⁸ +1 Остается сказать. что круто сделано, а что по ссылке перейти, думаю можно поставить. Kosten 13 Ноября 2016 23:43⁹ 0 Тут наверно нужно немного код под ссылку переписать, так согласен, но возможно она и не нужна, смотря какую функцию выполнять будет, но явно что показывать информацию по сайту.
1 2 »