Variable font hover

Loading

Как подключить шрифт и сжать код в финале

Инструкция

Текст

Видео

Процесс

Подключите вариативный шрифт на сайт
Проверьте характеристики шрифта (есть ли у него 'wght' — Weight/Жирность)
Задайте тексту, к которому хотите применить анимацию класс
Если вы подключили шрифт через Cloudinary, то перечислите в коде со страницы Инфо вместо класса .custom-font div свои названия классов через запятую по схеме .название класса div, .название класса div. Подробнее этот процесс описан ниже
Создайте анимацию

Смена шрифта для текста

Если вы выбрали подключение с помощью cloudinary и планируете сделать на странице несколько разных анимаций, то добавьте классы в коде или же используйте расширение annexx для добавления двух классов элементам.

Объясню на примере:

Вы хотите подключить на страницу вариативный шрифт Roboto и использовать его только для ссылок в меню и для кнопок, заполняете форму на странице Инфо и вставляете код 2 на страницу.

<!-- Code by Fedyaeva -->
<!--Подключение шрифта-->
<style>
    @font-face {
	    src: url('RobotoVar-link.woff2') format('woff2-variations'),
	         url('RobotoVar-link.woff') format("woff");
	    font-family: "Roboto Var";
	    font-display: swap;
	    font-style: normal;
    }
    
    .custom-font div {
        font-family: "Roboto Var", sans-serif!important;
    }
</style>

Всему тексту, который должен быть вариативным вы задали класс custom-font. Если вы планируете для всего этого текста сделать одну анимацию, то пропускайте описание ниже. Если вы хотите сделать разную анимацию для пунктов меню и для кнопок, то выбирайте один из вариантов:
— Используйте расширение annexx для добавления двух классов элементам: custom-link для меню и custom-button для всех кнопок.
— Замените custom-font в кодe на названия классов текстовых элементов через запятую по образцу: .название класса div, .название класса div

.custom-link div, .custom-button div {
    font-family: "Roboto Var", sans-serif!important;
}

Сжатие кода

Для лучшей оптимизации и быстрой загрузки страницы сделайте дубликат блока T123 с кодом (это необходимо, чтобы в случае "поломки кода" оптимизатором была возможность его восстановить), скройте блок, сожмите код на этом сайте, вставьте его в новый блок T123, протестируйте работу.

При необходимости удалите не сжатый код, если не планируете его редактировать в ближайшее время.

Анимация ссылок, кнопок и простого текста

Простая анимация

Caravaggio

Michelangelo

The art of Caravaggio had a huge impact on the work of not only many Italian, but also the leading Western European masters of the 17th century - Rubens, Jordaens, Georges de Latour, Zurbaran, Velazquez, Rembrandt.

Инструкция

(скрыть)

About

Contact

Work

Merisi da

Caravaggio

-- FPS

1. Добавьте нужный текст в zero block и задайте ему класс.

2. Вставьте название класса в поле, введите начальную и конечную жирность текста.
Смотрите характеристику 'wght' у шрифта.

3. Выберите flex — "да", если хотите, чтобы при анимации текст расширялся от центра к краям (для моноширинных шрифтов можете выбрать "нет").

4. При необходимости замените значения длительности, задержку и функцию скорости.
Подобрать функцию скорости можно на этих сайтах: cubic-bezier.com и easings.net

5. Выберите, хотите ли вы сделать анимацию бесконечной или проигрывающейся при наведении только один раз.

6. Скопируйте и вставьте код в блок T123.

<!-- Code by Fedyaeva -->
<!-- Анимация вариативного шрифта при наведении -->
<style>
@media screen and (min-width: 768px) {
    .custom-link {
        display: flex;
        cursor: pointer;
        font-variation-settings: 'wght' 200;
        will-change: transform;
        animation-fill-mode: backwards;
    }
    .custom-link div {
        display: flex!important;
        justify-content: space-around;
    }
    .custom-link:hover {
        animation: sample-width 1.5s linear infinite 0s;
    }
    
    @keyframes sample-width {
        0%, 100% {
            font-variation-settings: 'wght' 200;
        }
        50% {
            font-variation-settings: 'wght' 560;
        }
    }
}
</style>

Анимация для ссылок и кнопок

Волна при наведении

Icke-binär

Otinade ar lans, tibel som nåplafans båbel sedan majäning, omakase inte krogick or fastän manga.

Инструкция

(скрыть)

News

⁘

Team

Contact

About

Work

В этом примере использована разная анимация для столбцов меню. В первом столбце анимация начинается с первой буквы постепенно доходя до последней, во втором столбце запускается сразу для всех букв одновременно.

1. Добавьте нужный текст в zero block и задайте ему класс.

2. Вставьте название класса в поле, введите начальную и конечную жирность текста.
Смотрите характеристику 'wght' у шрифта.

3. При необходимости замените значения задержки между анимацией отдельных букв и функцию скорости.
Обратите внимание, что в форме указывается длительность анимации первой буквы. Длительность остальных высчитывается автоматически по формуле: duration + delay*n (где n - порядковый номер буквы).
Подобрать функцию скорости можно на этих сайтах: cubic-bezier.com и easings.net

4. Выберите, хотите ли вы сделать анимацию бесконечной или проигрывающейся при наведении только один раз.

5. Скопируйте код 1, если хотите повторить эффект первого столбца меню и код 2, если хотите повторить эффект второго столбца меню.

6. Вставьте код в блок T123.

<!-- Code by Fedyaeva -->
<!-- Анимация вариативного шрифта при наведении -->
<style>
@media screen and (min-width: 768px) {
    .custom-link-1 span {
        font-variation-settings: 'wght' 200;
    }
    .custom-link-1:hover span {
        animation: sample-width-2 0.6s linear forwards;
    }
}
    @keyframes sample-width-2 {
        0%, 100% {
            font-variation-settings: 'wght' 200;
        }
        50% {
            font-variation-settings: 'wght' 700;
        }
    }
</style>
<script>
document.addEventListener("DOMContentLoaded",function(){
function splitText(el) {let elem;let textContainer;if (document.querySelectorAll(el).length > 1) {elem = document.querySelectorAll(el);elem.forEach((itm) => {textContainer = itm.querySelector('div');textContainer.innerHTML = '<span>' + itm.textContent.trim().split('').join('</span><span>') + '</span>';});} else {elem = document.querySelector(el);textContainer = elem.querySelector('div');textContainer.innerHTML = '<span>' + elem.textContent.trim().split('').join('</span><span>') + '</span>';}}
function addAnimation(el, time) {let elem;let textLength;let textSymbol;let span;let delay = 0.4;if (document.querySelectorAll(el).length > 1) {elem = document.querySelectorAll(el);elem.forEach((itm) => {textLength = itm.querySelectorAll('div span').length;for (let i = 0; i <= textLength; i += 1) {textSymbol = `div span:nth-of-type(${i})`;span = itm.querySelector(textSymbol);if (span) {span.style.animationDelay = `${delay}s`;delay += time;}}delay = 0.4;});} else {elem = document.querySelector(el);textLength = elem.querySelectorAll('div span').length;delay = 0;for (let i = 0; i <= textLength; i += 1) {textSymbol = `div span:nth-of-type(${i})`;span = elem.querySelector(textSymbol);if (span) {span.style.animationDelay = `${delay}s`;delay += time;}}}}if (window.matchMedia("(min-width: 400px)").matches) {splitText('.custom-link-1');addAnimation('.custom-link-1', 0.15);}})
</script>

<!-- Code by Fedyaeva -->
<!-- Анимация вариативного шрифта при наведении -->
<style>
@media screen and (min-width: 768px) {
    .custom-link-2 span {
        font-variation-settings: 'wght' 200;
    }
    .custom-link-2:hover span {
        animation: sample-width-2 var(--dur) linear infinite;
    }
}
    @keyframes sample-width-2 {
        0%, 100% {
            font-variation-settings: 'wght' 200;
        }
        50% {
            font-variation-settings: 'wght' 700;
        }
    }
</style>
<script>
document.addEventListener("DOMContentLoaded",function(){
function splitText(el) {let elem;let textContainer;if (document.querySelectorAll(el).length > 1) {elem = document.querySelectorAll(el);elem.forEach((itm) => {textContainer = itm.querySelector('div');textContainer.innerHTML = '<span>' + itm.textContent.trim().split('').join('</span><span>') + '</span>';});} else {elem = document.querySelector(el);textContainer = elem.querySelector('div');textContainer.innerHTML = '<span>' + elem.textContent.trim().split('').join('</span><span>') + '</span>';}}
function addAnimation2(el, time) {let elem;let textLength;let textSymbol;let span;let dur = 0.4;if (document.querySelectorAll(el).length > 1) {elem = document.querySelectorAll(el);elem.forEach((itm) => {textLength = itm.querySelectorAll('div span').length;for (let i = 0; i <= textLength; i += 1) {textSymbol = `div span:nth-of-type(${i})`;span = itm.querySelector(textSymbol);if (span) {span.style.setProperty("--dur", dur + "s");dur += time;}}dur = 0.4;});} else {elem = document.querySelector(el);textLength = elem.querySelectorAll('div span').length;dur = 0;for (let i = 0; i <= textLength; i += 1) {textSymbol = `div span:nth-of-type(${i})`;span = elem.querySelector(textSymbol);if (span) {span.style.setProperty("--dur", dur + "s");dur += time;}}}}if (window.matchMedia("(min-width: 400px)").matches) {splitText('.custom-link-2');addAnimation2('.custom-link-2', 0.15);}})
</script>

Анимация для ссылок и кнопок

Побуквенная анимация

BEHÖKTIGT

Инструкция

(скрыть)

Cisperson digitalbox respektive teska

Ätare ogt utsmarta megavis förutom

/

Kvasirär saprektig, miss plasade

Team

Work

More

About

В этом примере использована разная анимация для столбцов меню. В первом столбце анимация начинается с первой буквы постепенно доходя до последней, во втором столбце запускается сразу для всех букв одновременно.

1. Добавьте нужный текст в zero block и задайте ему класс.

2. Вставьте название класса в поле, введите начальную и конечную жирность текста.
Смотрите характеристику 'wght' у шрифта.

3. При необходимости замените значения длительности, отключите на мобильном устройстве.

4. Скопируйте код и вставьте код в блок T123.

<!-- Code by Fedyaeva -->
<!-- Анимация вариативного шрифта при наведении -->
<style>
    .custom-link-3 {
        font-variation-settings: 'wght' 200;
    }
</style>
<script>
document.addEventListener("DOMContentLoaded",function(){
    function splitText(el) {
        let elem;
        let textContainer;
        
        if (document.querySelectorAll(el).length > 1) {
            elem = document.querySelectorAll(el);
            elem.forEach((itm) => {
                textContainer = itm.querySelector('div');
                textContainer.innerHTML = '<span>' + itm.textContent.trim().split('').join('</span><span>') + '</span>';
            });
        } else {
            elem = document.querySelector(el);
            textContainer = elem.querySelector('div');
            textContainer.innerHTML = '<span>' + elem.textContent.trim().split('').join('</span><span>') + '</span>';
        }
    }
    
    function addAnimation2 (el) {
        var animText = document.querySelectorAll(el);
        animText.forEach((item) => {
            let i = 0;
            let interval;
            item.addEventListener('mouseenter', (e) => {
                let span = event.target.querySelectorAll('div span');
                    interval = setInterval(function() {
                    span.forEach(char => {
                        char.style.fontVariationSettings = '"wght" 200';
                    })
                    span[i].style.fontVariationSettings = '"wght" 700';
                    i += 1;
                    if (i == span.length) i = 0;
                }, 250);
            })
            item.addEventListener('mouseleave', (e) => {
                let allSpan = document.querySelectorAll('div span');
                allSpan.forEach(char => {
                    char.style.fontVariationSettings = '"wght" 200';
                })
                clearInterval(interval);
                i = 0;
            });
        })
    }
    if (window.matchMedia("(min-width: 400px)").matches) {
        splitText('.custom-link-3');
        addAnimation2('.custom-link-3');
    }
});
</script>

Закинуть на кефас

Если ты пользуешься моими эффектами для тильды и хочешь меня поблагодарить — ткни на одну из кнопок