<!--Анимация подчеркивания текста (Underline)-->
<!--https://7emenovi4.tilda.ws/link-->
<style>
:root {
--UnderlineColor: #FF6B03; /*цвет подчеркивания*/
--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>
<!--Волна под текстом--><!--https://7emenovi4.tilda.ws/link--><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>
<!--Подчеркивание текста--><!--https://7emenovi4.tilda.ws/link--><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>
<!--Заполнение текста цветом--><!--https://7emenovi4.tilda.ws/link--><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>
<!--Перелистывание текста--><!--https://7emenovi4.tilda.ws/link--><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>