» »

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

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

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

Комментарий: 14
avatar
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
Тут наверно нужно немного код под ссылку переписать, так согласен, но возможно она и не нужна, смотря какую функцию выполнять будет, но явно что показывать информацию по сайту.
tsakonter
tsakonter 13.11.2016 23:4610
+2
Вот тоже Ничоси, спасибо за новое, точно где то пристрою, надо сайт уникальный строить.
iMadeas
iMadeas 14.11.2016 10:0211
0
Цитата FeStemBer
Что то не сильно пойму, как заметил, что iMadeas заливает под один дизайн,

Цитата Brung
а что ссылку нельзя добавить, просто когда показывается название и если тебя заинтересовало, чтоб по клику перейти. Или просто это больше к рекламе своего сайта относится


1. ссылку можно добавить, но не думаю что в этом есть смысл, так как данный материал служит скорее для декора сайта, чем для ссылочной массы.
2. размещение картинки ни коим образом не является рекламой наших услуг, нет. Просто многие опубликованные мною материалы раньше стояли у нас на сайте. Как и этот скрипт, но мы его заменили. В связи с этим и было решено опубликовать его на всеобщее обозрение. Поэтому и стилизация "под один дизайн". Но думаю в умелых руках заменить стили под себя не составит проблем. Рад что некоторым понравилось.
Dixes
Dixes 14.11.2016 20:1512
0
иконка глюкает
Brung
Brung 14.11.2016 20:1713
0
Но на DEMO нормально.
1 2 »
avatar