Loading
-- FPS
Как подключить шрифт и сжать код в финале
Инструкция
Смена шрифта для текста
Если вы выбрали подключение с помощью cloudinary и планируете сделать на странице несколько разных анимаций и прелоадер, то добавьте классы в коде или же используйте расширение annexx для добавления двух классов элементам.
Объясню на примере:
Вы хотите подключить на страницу вариативный шрифт Roboto и использовать для заголовка в баннере и сделать прелоадер, заполняете форму на странице Инфо и вставляете код 2 на страницу.
Если вы выбрали подключение с помощью 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-title для заголовка и custom-loader-text для текста в прелоадере.
— Замените custom-font в кодe на названия классов текстовых элементов через запятую по образцу: .название класса div, .название класса div
— Используйте расширение annexx для добавления двух классов элементам: custom-title для заголовка и custom-loader-text для текста в прелоадере.
— Замените custom-font в кодe на названия классов текстовых элементов через запятую по образцу: .название класса div, .название класса div
.custom-title div, .custom-loader-text div {
font-family: "Roboto Var", sans-serif!important;
}Сжатие кода
Для лучшей оптимизации и быстрой загрузки страницы сделайте дубликат блока T123 с кодом (это необходимо, чтобы в случае "поломки кода" оптимизатором была возможность его восстановить), скройте блок, сожмите код на этом сайте, вставьте его в новый блок T123, протестируйте работу.
При необходимости удалите не сжатый код, если не планируете его редактировать в ближайшее время.
Для лучшей оптимизации и быстрой загрузки страницы сделайте дубликат блока T123 с кодом (это необходимо, чтобы в случае "поломки кода" оптимизатором была возможность его восстановить), скройте блок, сожмите код на этом сайте, вставьте его в новый блок T123, протестируйте работу.
При необходимости удалите не сжатый код, если не планируете его редактировать в ближайшее время.
Простой прелоадер
Прелоадер №1
Loading
Инструкция
(скрыть)
Проиграть прелоадер
1. Добавьте нужный текст в zero block и задайте ему класс.
2. Вставьте название класса в поле, введите начальную и конечную жирность текста.
Смотрите характеристику 'wght' у шрифта.
3. Вставьте ID Zero Block с прелоадером в поле.
4. Укажите время, которое прелоадер должен отображаться до исчезновения.
5. Выберите, нужно ли отображать прелоадер на мобильном устройстве.
6. Скопируйте код и вставьте код в блок T123.
2. Вставьте название класса в поле, введите начальную и конечную жирность текста.
Смотрите характеристику 'wght' у шрифта.
3. Вставьте ID Zero Block с прелоадером в поле.
4. Укажите время, которое прелоадер должен отображаться до исчезновения.
5. Выберите, нужно ли отображать прелоадер на мобильном устройстве.
6. Скопируйте код и вставьте код в блок T123.
Фичи
Если хотите сделать интересный эффект с фразой, которая будет занимать 100% ширины экрана и равномерно распределить по всей ширине буквы, то:
1. Расположите текст слева по window контейнеру, при желании сделайте отступ от левого края, выберите выравнивание по центру.
В моем сделан отступ в 40px.
2. Выберите в форме flex — "да".
3. Укажите сумму отступов слева и справа от текста.
Если в первом шаге вы не сделали отступ, то укажите 0.
4. Если вы хотите отключить фичу на телефоне, то выберите в поле Отключить фичу на мобиле — "да".
Можно отдельно отключить фичу, оставив простую анимацию на телефоне. Или же отключить оба эффекта разом, если выбрать в обоих полях значение "да".
1. Расположите текст слева по window контейнеру, при желании сделайте отступ от левого края, выберите выравнивание по центру.
В моем сделан отступ в 40px.
2. Выберите в форме flex — "да".
3. Укажите сумму отступов слева и справа от текста.
Если в первом шаге вы не сделали отступ, то укажите 0.
4. Если вы хотите отключить фичу на телефоне, то выберите в поле Отключить фичу на мобиле — "да".
Можно отдельно отключить фичу, оставив простую анимацию на телефоне. Или же отключить оба эффекта разом, если выбрать в обоих полях значение "да".
<!-- Code by Fedyaeva -->
<!-- Preloader -->
<style>
#rec404060260{display:none}@media(min-width:768px){#rec404060260{position:fixed;top:0;left:0;right:0;bottom:0;z-index:100005;height: 100%; width: 100%;}}#rec404060260 .t396__artboard{min-height:100%!important;height:100vh!important}.custom-font-2 span{font-variation-settings:'wght' var(--font-weight,200)}@media(min-width:768px){.custom-font-2{width:calc(100% - 80px)!important}.custom-font-2 div{display:flex!important;justify-content:space-between}}
</style>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.4/gsap.min.js"></script>
<script>
let action;document.body.style.overflow="hidden";function splitText(el){if(el.length>1){let elem=document.querySelectorAll(el);elem.forEach((elm)=>{let textContainer=elm.querySelector('div');textContainer.innerHTML='<span>'+elm.textContent.trim().split('').join('</span><span>')+'</span>'})}else{let elem=document.querySelector(el);let textContainer=elem.querySelector('div');textContainer.innerHTML='<span>'+elem.textContent.trim().split('').join('</span><span>')+'</span>'}}
function startAnimation(el){let charsNew=document.querySelectorAll(el);action=gsap.timeline().from(charsNew,{"--font-weight":200,ease:"sine"}).to(charsNew,{"--font-weight":600,duration:1,ease:"sine.inOut",stagger:{yoyo:!0,each:0.1,repeat:-1}},1);action.play()}
function stopAnimation(){action.pause(0);}
function openPreload(el){let preload=document.querySelector(el);startAnimation('.custom-font-2 span');preload.style.opacity=1;preload.style.display="block"}
function closePreload(el){let preload=document.querySelector(el);preload.style.opacity=1;let preloadTime=setInterval(function(){preload.style.opacity=preload.style.opacity-0.05;if(preload.style.opacity<=0.05){clearInterval(preloadTime);preload.style.display="none"}},5);document.body.style.overflow=""; stopAnimation();}
document.addEventListener("DOMContentLoaded",function(){if(window.matchMedia("(min-width: 768px)").matches){splitText('.custom-font-2');openPreload('#rec404060260');}});window.onload=function(){if(window.matchMedia("(min-width: 768px)").matches){setTimeout(function(){closePreload('#rec404060260')},5500);}}
</script>Loading
Динамичная анимация прелоадера
Прелоадер №2
Loading
Loading
Loading
Loading
Инструкция
(скрыть)
Проиграть прелоадер
1. Добавьте нужный текст в zero block и задайте ему класс.
Чтобы повторить анимацию из примере — добавьте 4 строки текста, каждой из которой задайте свой класс. Для удобства используйте порядковый номер: custom-title--1, custom-title--2 и т.д.
2. Вставьте название класса в поле, введите начальную и конечную жирность текста, начальную и конечную ширину текста.
Смотрите характеристики 'wght' и 'wdth' у шрифта. Если вы хотите повторить анимацию — перечислите классы через запятую.
3. Вставьте ID Zero Block с прелоадером в поле.
4. При необходимости измените длительность анимации и функцию скорости.
Подобрать функцию скорости можно на этих сайтах: cubic-bezier.com и easings.net
5. Укажите время, которое прелоадер должен отображаться до исчезновения.
6. Выберите, нужно ли отображать прелоадер на мобильном устройстве.
7. Скопируйте код и вставьте код в блок T123.
Чтобы повторить анимацию из примере — добавьте 4 строки текста, каждой из которой задайте свой класс. Для удобства используйте порядковый номер: custom-title--1, custom-title--2 и т.д.
2. Вставьте название класса в поле, введите начальную и конечную жирность текста, начальную и конечную ширину текста.
Смотрите характеристики 'wght' и 'wdth' у шрифта. Если вы хотите повторить анимацию — перечислите классы через запятую.
3. Вставьте ID Zero Block с прелоадером в поле.
4. При необходимости измените длительность анимации и функцию скорости.
Подобрать функцию скорости можно на этих сайтах: cubic-bezier.com и easings.net
5. Укажите время, которое прелоадер должен отображаться до исчезновения.
6. Выберите, нужно ли отображать прелоадер на мобильном устройстве.
7. Скопируйте код и вставьте код в блок T123.
<!-- Code by Fedyaeva -->
<!-- Preloader -->
<style>
#rec404075113{display:none;}#rec404075113 .t396__artboard{display:flex;flex-direction:column;justify-content:center;align-items:center;}@media(min-width:768px){#rec404075113{position:fixed;top:0;left:0;right:0;bottom:0;z-index:100005}}.custom-font-7,.custom-font-8,.custom-font-9,.custom-font-10{display:flex;justify-content:center;font-variation-settings:"wght" 100,"wdth" 50;animation: wacky 5s ease infinite; will-change:transform; animation-fill-mode: backwards; position: relative; top:0!important; left:0!important;} .custom-font-7 div,.custom-font-8 div,.custom-font-9 div,.custom-font-10 div{display:flex!important;justify-content:center;}
@keyframes wacky{0%{font-variation-settings:"wght" 100,"wdth" 50}
25%{font-variation-settings:"wght" 100,"wdth" 150}
50%{font-variation-settings:"wght" 700,"wdth" 150}
75%{font-variation-settings:"wght" 700,"wdth" 50}
100%{font-variation-settings:"wght" 100,"wdth" 50}}
</style>
<script>
document.body.style.overflow="hidden";let elem;function addAnimationNew(el,time){let elem=document.querySelectorAll(el);let textLength=elem.length;let delay=1;for(let i=0;i<=textLength;i+=1){let span=elem[i];if(span){span.style.animationDelay=`${delay}s`;delay+=time}}}
function startAnimationNew(el){addAnimationNew(el,0.1);elem=document.querySelectorAll(el);elem.forEach(item=>item.style.animationPlayState="running")}
function stopAnimationNew(el){elem=document.querySelectorAll(el);elem.forEach(item=>item.style.animationPlayState="paused")}
function openPreloadNew(el){let preload=document.querySelector(el);startAnimationNew('.custom-font-7, .custom-font-8, .custom-font-9, .custom-font-10');preload.style.opacity=1;preload.style.display="block"}
function closePreloadNew(el){let preload=document.querySelector(el);preload.style.opacity=1;let preloadTimeNew=setInterval(function(){preload.style.opacity=preload.style.opacity-0.05;if(preload.style.opacity<=0.05){clearInterval(preloadTimeNew);preload.style.display="none"}},5);document.body.style.overflow="";stopAnimationNew('.custom-font-7, .custom-font-8, .custom-font-9, .custom-font-10')}
document.addEventListener("DOMContentLoaded",function(){if(window.matchMedia("(min-width: 768px)").matches){openPreloadNew('#rec404075113');}});window.onload=function(){if(window.matchMedia("(min-width: 768px)").matches){setTimeout(function(){closePreloadNew('#rec404075113')},5500);}}
</script>
Loading
Loading
Loading
Loading
