» »

Изменяющиеся слова при помощи 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.11.2016 Просмотров: 658 Комментарий: (14)

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

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

Комментарий: 14
Start
Start 13.11.2016 23:101
0
Ничоси...
Kosten
Kosten 13.11.2016 23:143
0
Start, сам говорю в первые такую анимацию вижу, это так можно описать много, и главное красиво смотрится.
Kosten
Kosten 13.11.2016 23:132
0
Интересная анимация, в первые такую встречаю, так как что то похоже на слайдер, только с названием и описанием.
Brung
Brung 13.11.2016 23:184
0
Но это точно уникальный материал, а что ссылку нельзя добавить, просто когда показывается название и если тебя заинтересовало, чтоб по клику перейти. Или просто это больше к рекламе своего сайта относится, но как можно посмотреть, и на темный и светлый нормально подойдет.

FeStemBer
FeStemBer 13.11.2016 23:225
0
Что то не сильно пойму, как заметил, что iMadeas заливает под один дизайн, хотелось под паблики больше. Не чего против, но просто не думаю что такой скрипт подойдет к примеру на этот сайт.
Kosten
Kosten 13.11.2016 23:286
+1
Не вижу не чего, если поставить на этот сайт, главное чтоб подошел и по теме стоял. А если под стандарт заливать, но должно быть какое то разнообразие, здесь все по скриптам стильно смотрится.
FeStemBer
FeStemBer 13.11.2016 23:337
0
Не спорю, что можно поставить и правильно, чтоб по теме все было. Так то вообще это софт сайты, но есть и интернет магазины и вообще дизайн, что и не подумаешь, что на юкоз, вот как не DEMO который показан.
Сафрон
Сафрон 13.11.2016 23:368
+1
Остается сказать. что круто сделано, а что по ссылке перейти, думаю можно поставить.
Kosten
Kosten 13.11.2016 23:439
0
Тут наверно нужно немного код под ссылку переписать, так согласен, но возможно она и не нужна, смотря какую функцию выполнять будет, но явно что показывать информацию по сайту.
1 2 »
avatar