Модификация включает в себя 5 разных анимаций для ссылок.
Описание
Видеоинструкция по подключению
Создаём новую страницу на сайте
Шаг 1
Скроллим в самый низ и нажимаем кнопку «Указать ID шаблона»
Шаг 2
В графе указываем номер шаблона (он указан в начале инструкции), нажимаем кнопку «Выбрать»
Шаг 3
Пошаговая инструкция с подключением кода
Анимация подчеркивания текста (Underline)
В Zero-блоке создаём текстовую область со своей ссылкой и присваиваем ей класс link-underline
Шаг 1
<!--Анимация подчеркивания текста-->
<!--https://mt-webdesign.ru/link-animation-->
<style>
:root {
--UnderlineColor: #000; /*цвет подчеркивания*/
--UnderlineHeight: 1.2px; /*размер подчеркивания*/
--UnderlinePadding: 5px; /*отступ от текста*/
}
@keyframes link-line {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(200%);
}
}
.link-underline .tn-atom {
position: relative;
padding-bottom: var(--UnderlinePadding);
overflow: hidden;
.underline-line {
position: absolute;
bottom: 0;
width: 100%;
display: block;
height: var(--UnderlineHeight);
background: var(--UnderlineColor);
&:before {
content: '';
position: absolute;
bottom: 0px;
left: 0;
display: block;
width: 100%;
height: var(--UnderlineHeight);
background: var(--UnderlineColor);
transform: translateX(-200%);
}
}
&:hover {
cursor: pointer;
.underline-line {
animation: link-line 0.7s cubic-bezier(.52,.04,.28,.97);
}
}
}
</style>
<script>
var linkunderline = document.querySelectorAll('.link-underline .tn-atom');
linkunderline.forEach(function(element) {
var linkLine = document.createElement('span');
linkLine.className = 'underline-line';
element.appendChild(linkLine);
});
</script>Волна под текстом (Wave)
В Zero-блоке создаём текстовую область со своей ссылкой и присваиваем ей класс link-wave
Шаг 1
<!--Волна под текстом-->
<!--https://mt-webdesign.ru/link-animation-->
<style>
:root {
--LinkWaveColor: #000; /*цвет подчеркивания*/
--LinkWaveHeight: 3px; /*размер подчеркивания*/
--LinkWavePadding: 5px; /*отступ от текста*/
}
.wrapper-wave {
overflow: hidden;
position: absolute;
padding-bottom: var(--LinkWavePadding);
}
.link__graphic--slide {
transition: transform 0.7s;
transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
}
.link-wave:hover .link__graphic--slide {
transform: translate3d(-66.6%, 0, 0);
}
.link__graphic {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
fill: none;
stroke: var(--LinkWaveColor);
stroke-width: var(--LinkWaveHeight);
}
.link__graphic--stroke path {
stroke-dasharray: 1;
stroke-dashoffset: 1;
}
.link:hover .link__graphic--stroke path {
stroke-dashoffset: 0;
}
</style>
<svg class="link__graphic link__graphic--slide" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
<path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"></path>
</svg>
<script>
$('.link__graphic--slide').appendTo('.link-wave .tn-atom a');
$('.link-wave .tn-atom a').each(function() {
$(this).wrap('<div class="wrapper-wave"></div>');
});
</script>Подчеркивание текста (Accentuation)
В Zero-блоке создаём текстовую область со своей ссылкой и присваиваем ей класс link-accentuation
Шаг 1
<!--Подчеркивание текста-->
<!--https://mt-webdesign.ru/link-animation-->
<style>
:root {
--AccentuationColor: #000; /*цвет заливки по наведению*/
--AccentuationHeight: 1.2px; /*размер подчеркивания*/
--AccentuationPadding: 4px; /*отступ от текста*/
}
/*Минимальная ширина экрана 480px*/
@media only screen and (min-width: 480px) {
.hover-accentuation-text,
.hover-accentuation-text:before {
opacity: 0;
transform: translateX(-100%);
transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s;
transition-delay: 0.7s;
}
.link-accentuation .tn-atom:hover .hover-accentuation-text,
.link-accentuation .tn-atom:hover .hover-accentuation-text:before {
opacity: 1;
transform: translateX(0);
transition-delay: 0s;
}
@keyframes anim-in-text-accentuation {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0);
}
}
@keyframes anim-in-accentuation {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
@keyframes anim-out-accentuation {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
@keyframes anim-out-text-accentuation {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}
.hover-accentuation-text {
position: absolute;
top: 0;
left: 0;
transform: translateX(-100%);
display: inline-table;
width: 100%;
height: 100%;
padding-top: var(--AccentuationPadding);
overflow: hidden;
pointer-events: none;
-webkit-animation: anim-out-text-accentuation 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
animation: anim-out-text-accentuation 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hover-accentuation-text:before {
content: "";
background: var(--AccentuationColor);
width: 100%;
height: var(--AccentuationHeight);
position: absolute;
bottom: 0;
transform: translateX(100%);
display: inline-table;
width: 100%;
-webkit-animation: anim-out-accentuation 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
animation: anim-out-accentuation 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.link-accentuation .tn-atom:hover .hover-accentuation-text {
transform: translateX(0);
-webkit-animation: anim-in-accentuation 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
animation: anim-in-accentuation 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.link-accentuation .tn-atom:hover .hover-accentuation-text:before {
-webkit-animation: anim-in-text-accentuation 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
animation: anim-in-text-accentuation 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
}
</style>
<!--Минимальная ширина экрана 480px-->
<script>
if ($(window).width() > 480) {
$(document).ready(function() {
$('.link-accentuation .tn-atom').each(function(index, el) {
var text = $(el).text();
$(el).append('<span class="hover-accentuation-text" data-text="' + text + '"></span>');
});
});
}
</script>Подчеркивание текста (Filling)
В Zero-блоке создаём текстовую область со своей ссылкой и присваиваем ей класс link-filling
Шаг 1
<!--Заполнение текста цветом-->
<!--https://mt-webdesign.ru/link-animation-->
<style>
:root {
--FillingColor: #afafaf; /*цвет заливки по наведению*/
}
/*Минимальная ширина экрана 480px*/
@media only screen and (min-width: 480px) {
.hover-fill-text,
.hover-fill-text:before {
opacity: 0;
transform: translateX(-100%);
transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s;
transition-delay: 0.7s;
}
.link-filling .tn-atom:hover .hover-fill-text,
.link-filling .tn-atom:hover .hover-fill-text:before {
opacity: 1;
transform: translateX(0);
transition-delay: 0s;
}
@keyframes anim-in-text {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0);
}
}
@keyframes anim-in-layer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
@keyframes anim-out-text {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
@keyframes anim-out-layer {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}
.link-filling {
pointer-events: none;
}
.link-filling a {
pointer-events: all;
}
.link-filling .tn-atom {
position: relative;
display: block;
/*overflow: hidden;*/
}
.hover-fill-text {
position: absolute;
top: 0;
left: 0;
transform: translateX(-100%);
display: inline-table;
width: 100%;
overflow: hidden;
pointer-events: none;
-webkit-animation: anim-out-layer 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
animation: anim-out-layer 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hover-fill-text:before {
content: attr(data-text);
color: var(--FillingColor);
transform: translateX(100%);
display: inline-table;
text-shadow: 0px 0px 0px var(--FillingColor);
width: 100%;
-webkit-animation: anim-out-text 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
animation: anim-out-text 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.link-filling .tn-atom:hover .hover-fill-text {
transform: translateX(0);
-webkit-animation: anim-in-layer 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
animation: anim-in-layer 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.link-filling .tn-atom:hover .hover-fill-text:before {
-webkit-animation: anim-in-text 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
animation: anim-in-text 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
}
</style>
<!--Минимальная ширина экрана 480px-->
<script>
if ($(window).width() > 480) {
$(document).ready(function() {
$('.link-filling .tn-atom').each(function(index, el) {
var text = $(el).text();
$(el).append('<span class="hover-fill-text" data-text="' + text + '"></span>');
});
});
}
</script>Перелистывание текста (Slide)
В Zero-блоке создаём текстовую область со своей ссылкой и присваиваем ей класс link-slide
Шаг 1
<!--Перелистывание текста-->
<!--https://mt-webdesign.ru/link-animation-->
<style>
:root {
--SlideTextColor: #afafaf; /* Цвет текста по наведению */
}
.link-slide a {
position: relative;
display: inline-block;
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
transition: transform 0.3s;
}
.link-slide a::before {
position: absolute;
top: 100%;
color: var(--SlideTextColor);
content: " " attr(data-content);
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.link-slide a:hover,
.link-slide a:focus {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
transform: translateY(-100%);
}
.wrapper-slide-text {
overflow: hidden;
}
</style>
<script>
$(document).ready(function () {
$('.link-slide').each(function () {
$(this).find('a').each(function() {
var slide_text = $(this);
var slide_text_inside = slide_text.text();
slide_text.attr('data-content', slide_text_inside);
});
});
$('.link-slide .tn-atom a').each(function () {
$(this).wrap('<div class="wrapper-slide-text"></div>');
});
});
</script>Более подробные настройки, возможности взаимодействия и подключение в видео
Другие модификации
