Анимация сворачивания текста в абривиатуру

Question

Я хочу сделать с помощью css (возможно js и jquery) анимацию разворачивания текста на hover. Например есть надпись "YT" и при наведении превращается в YouTube, есть ли готовые примеры такой анимации, или советы как это сделать

Answer 1

Я бы наверное сделал что-то вроде:

<span class="expand-abbr">
<span class="abbr">Y</span><span class="word">ou</span>
<span class="abbr">T</span><span class="word">ube</span></span>

При ховере на expand-abbr отображать span.word, которые по умолчанию скрыты. А как отображать, это уже дело вкуса, можно CSS (transition) или через js

Answer 2

А я бы решил иначе. Если придется, например, заполнять из базы данных, то не понадобится резать строку на части.

.abbreviation {background:pink;padding:0.5em;}

.abbreviation:before {content:attr(short)}
.abbreviation:hover:before {content:attr(long)}

<span class="abbreviation" short="YT" long="Котики"></span><br/><br/>
<span class="abbreviation" short="FB" long="Какая-то фигня"></span>

Answer 3

Для @MaximLensky: в режиме аббревитуры рядом с буквами Y и T видны краешки соседних букв.

.flex {
  display: inline-flex;
  align-items: center;
  margin-left:100px;
  transform: scale(5);
}

p span:nth-of-type(2) {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  width: 1px;
  transition: 0.1s ease;
}

.flex:hover span:nth-of-type(2) {
  width: auto;
}

<div class="flex">
  <p><span>Y</span><span>ou</span> </p>
  <p><span>T</span><span>ube</span> </p>
</div>

БЛОГ НА HUSL

Анимация сворачивания текста в абривиатуру

Ответы (3 шт):