В данном примере рассмотрим как заанимировать волнообразное движение текста. Данная анимация прекрасно подходит в качестве hover-эффекта для ссылки.
|
1 2 3 |
<a href="#" class="wave_a"> waveswaves </a> |
Первостепенной задачей является разделение текста ссылки на отдельные буквы, для этого воспользуемся готовым решением: плагином jquery lettering.js. Данный плагин перемещает каждую букву текста в отдельный span со своим классом, что позволяет работать с каждой буквой по отдельности. Скачать плагин можно по следующей ссылке или подключить через CDN. Не забудьте подключить jquery.
|
1 |
$('a').lettering(); |
Результат выполнения кода: текст ссылки делится на 10 строчных элементов с разными классами char$.
Для реализации эффекта волны будем использовать анимацию css, для этого необходимо задать несколько параметров : амплитуду (максимальное отклонение символов), период (длительность анимации), количество анимируемых символов. Задаем их в файле scss.
|
1 2 3 4 5 6 |
$amplitude : .25rem; //амплитуда $count : 15; //максимально возможное количество символов $duration : .5; // период анимации в секундах |
Анимация будет заключаться в смещении буквы вверх и вниз по оси y, на величину амплитуды. Для этого нам понадобится три ключевых кадра:
|
1 2 3 4 5 6 7 8 |
@keyframes wave { 0%{transform : translateY(0);} //начальное положение 25%{transform : translateY(-$amplitude);} //смещение вверх на величину амплитуды 75%{transform : translateY($amplitude);} //смещение вниз на величину амплитуды } |
После применения анимации видим, что буквы двигаются одновременно. Для достижения эффекта волны, необходимо задать задержку анимации для каждой буквы. Для решения этой задачи, воспользуемся циклом sass @for.
|
1 2 3 4 5 6 |
@for $i from 1 through $count { .wave_a :nth-child( #{$i} ) { animation-delay : //#{$i}s; #{($i)*$duration / $count }s; } } |
Результатом выполнения цикла является набор классов char$ (количество классов равно максимальному количеству анимируемых символов, указанному в переменной $count).
|
1 2 3 4 5 6 7 8 9 10 |
.wave_a :nth-child(1) { animation-delay: 0.0416666667s; } .wave_a :nth-child(2) { animation-delay: 0.0833333333s; } .wave_a :nth-child(3) { animation-delay: 0.125s; } итд. |
Величина задержки определяется отношением длительности анимации $duration к максимальному количеству символов $count, умноженное на порядковый номер символа. Обратите внимание, если брать значение $count с большим запасом, величина задержки между соседними символами снижается. В результате, символы начинаются двигаться синхронно, эффект волны отсутствует. Поэтому правильно подбирайте данное соотношение.
See the Pen wave_text_0007 by Paul (@1110000) on CodePen.
