6

Добрый день! Подскажите пожалуйста как сделать примерно такую анимацию на CSS:

https://www.youtube.com/watch?v=jxXFzbfud_w&feature=youtu.be

введите сюда описание изображения

Ещё один вопрос по этой анимации: можно ли сделать так, чтобы буквы красились в определённый цвет при наведении волной?

Дух сообщества
  • 1
Eugen Eray
  • 1,196
  • Можно такое сделать на svg - так будет полегче. Иначе можно разбить каждую букву на 1 отдельный тег и при помощи препроцессоров (sass, к примеру) при помощи цикла задать таймаут для анимации каждой буквы. Вообщем, это реально, но запарно. Делать мне лень такое (: – wokalek Apr 03 '17 at 07:50
  • 2
    к сожалению на css такое геморно делать, могу вам предложить такую библиотеку http://textillate.js.org/, посмотрите какие у нее есть эффекты, я видел там похожий и называется она bounce – jashka Apr 03 '17 at 07:57
  • @VostokSisters На SVG тоже подойдет. Но если не хотите - вас никто не заставляет. Просто спросил, возможно ли такое. – Eugen Eray Apr 03 '17 at 08:09

1 Answers1

10

SVG решение:

Анимация начинается при наведении на ссылку
Анимация основана на изменении атрибута d path Промежуточные значения можно получить с помощью онлайн генератора квадратичных кривых Безье
Интересней выглядит в полно-экраном режиме.

<style>
  svg {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/hawaii-beach.jpg);
  background-size:cover;
  width:50%
  height:50%
  }
 </style>

<svg   viewBox="0 0 650 500">


<defs> 
 <path id="Lsvg" d="M100 200Q200,200 300,200 T500,200" style="stroke:teal;fill-opacity:0.3;stroke-width:3;fill:none">
<animate begin="0.5s"  dur="10s" restart="whenNotActive"  attributeName="d" 
values="M100 200Q200,200 300,200 T500,200;
M100 200Q200,100 300,200 T500,200;
M100 200Q200,200 300,200 T500,200;
M100 200Q200,300 300,200 T500,200;
M100 200Q200,200 300,200 T500,200"/> 
</path>


</defs>
<text text-anchor="middle" font-size="25" fill="#026282">
  <textPath id="result" method="align" spacing="auto" startOffset="50%" xlink:href="#Lsvg"><tspan dy="-20">So easy to do with SVG just  few lines</tspan></textPath>
<animate
 begin="animLink.mouseover"
 dur="10s"
 repeatCount="1"
 attributeName="fill"
 values="red;green;red;green;red"/>
</text>
<use xlink:href="#Lsvg" transform="translate(0 -10)"/>


<rect id="animLink" x="100" y="150" width="400" height="60" fill="#E0E0E0" fill-opacity="0.01" stroke="none" />


&lt;/svg&gt;



</body>
 </html>

Анимация с применением квадратичных кривых Безье подробно описана в ответе на вопрос «Можно ли сделать с помощью css такую анимацию?» Прочтите, если появился интерес, и тогда будет легче понять, как тут работает анимация.

Alexandr_TT
  • 110,146
  • 23
  • 114
  • 384