Fill the form
We will contact you to confirm the details
Текс который анимируется Текс который анимируется Текс который анимируется
Текс который анимируется Текс который анимируется Текс который анимируется
Пошаговая форма с финалом зеро на 3 шага
Значения, которые были введены
Для того чтобы добавить анимацию подсветки текста при скроллинге в Зеро блоке, нужно сделать следующее:
1. «Класс» — В данном поле необходимо придумать и указать краткое название класса, который будет использоваться для добавления анимации подсветки текста при прокрутке страницы. Пример: "text-highlight";
Что бы указать класс у текста, нажимаешь на него правой кнопкой мыши и выбираешь из списка последнюю строку «Add CSS Class Name», далее, справа в настройках указываешь класс. Если ты хочешь применить анимацию ко всем текстовым элементам в Зеро блоке, тогда ты можешь указать класс самому блоку, а не каждому текстовому элементу отдельно. Для этого в генераторе модификации в поле класс, добавь к названию класса "uc-". Пример: "uc-text-highlight". После в настройках Зеро блока в самой нижней части настроек, укажи класс, нажав на ссылку "Добавить CSS Class Name";
3. «Скорость анимации (сек.)» — Это поле предназначено для настройки продолжительности анимации подсветки при прокрутке страницы. Скорость указывается в секндах;
4. «Цвет заднего фона» — Цвет заднего фона должен быть таким же как цвет фона блока, для которого настраивается анимация;
5. «Прозрачность текста» — Прозрачность текста до прокрутки. Значение указывается от 0 до 1;
6. «Цвет текста» — Цвет текста, которым будут заливаться слова;
7. Копируем сгенерированный HTML код и вставляем его в блок Т123;
Важно:
How
it
works
—
Just
do it
01
—
The
first
step
The
first
step
of
a
long
journey
is
to
determine
the
correct
sequence
of
actions
and
body
movements
06
—
The
last
move
The
first
step
of
a
long
journey
is
to
determine
the
correct
sequence
of
actions
and
body
movements
02
—
Make
it
possible
The
first
step
of
a
long
journey
is
to
determine
the
correct
sequence
of
actions
and
body
movements
04
—
Don't
stop
The
first
step
of
a
long
journey
is
to
determine
the
correct
sequence
of
actions
and
body
movements
05
—
Now
or
never
The
first
step
of
a
long
journey
is
to
determine
the
correct
sequence
of
actions
and
body
movements
03
—
Take
a
pause
The
first
step
of
a
long
journey
is
to
determine
the
correct
sequence
of
actions
and
body
movements
1. «Класс» — В данном поле необходимо придумать и указать краткое название класса, который будет использоваться для добавления анимации подсветки текста при прокрутке страницы. Пример: "text-highlight";
Что бы указать класс у текста, нажимаешь на него правой кнопкой мыши и выбираешь из списка последнюю строку «Add CSS Class Name», далее, справа в настройках указываешь класс. Если ты хочешь применить анимацию ко всем текстовым элементам в Зеро блоке, тогда ты можешь указать класс самому блоку, а не каждому текстовому элементу отдельно. Для этого в генераторе модификации в поле класс, добавь к названию класса "uc-". Пример: "uc-text-highlight". После в настройках Зеро блока в самой нижней части настроек, укажи класс, нажав на ссылку "Добавить CSS Class Name";
3. «Скорость анимации (сек.)» — Это поле предназначено для настройки продолжительности анимации подсветки при прокрутке страницы. Скорость указывается в секндах;
4. «Цвет заднего фона» — Цвет заднего фона должен быть таким же как цвет фона блока, для которого настраивается анимация;
5. «Прозрачность текста» — Прозрачность текста до прокрутки. Значение указывается от 0 до 1;
6. «Цвет текста» — Цвет текста, которым будут заливаться слова;
7. Копируем сгенерированный HTML код и вставляем его в блок Т123;
Важно:
- Советуем не использовать типограф, модификация может работать некорректно.
- Модификация работает некорректно с автоскейлом.
How
it
works
—
Just
do it
01
—
The
first
step
The
first
step
of
a
long
journey
is
to
determine
the
correct
sequence
of
actions
and
body
movements
06
—
The
last
move
The
first
step
of
a
long
journey
is
to
determine
the
correct
sequence
of
actions
and
body
movements
02
—
Make
it
possible
The
first
step
of
a
long
journey
is
to
determine
the
correct
sequence
of
actions
and
body
movements
04
—
Don't
stop
The
first
step
of
a
long
journey
is
to
determine
the
correct
sequence
of
actions
and
body
movements
05
—
Now
or
never
The
first
step
of
a
long
journey
is
to
determine
the
correct
sequence
of
actions
and
body
movements
03
—
Take
a
pause
The
first
step
of
a
long
journey
is
to
determine
the
correct
sequence
of
actions
and
body
movements
Як на картинке
<!--NOLIM--><!--NLM112--><!--settings{"elemClass":"nlmHighlight112","speedText":"0.3","bgColorTextAnimation":"#99bdff","opacityText":"0.8","textColor":"#0059ff"}settingsend--><!--ts1741697414198ts--> <style> .nlmHighlight112 .line { /* color:#0059ff; */ position: relative; } .nlmHighlight112:not([data-elem-type="button"]) .line-mask { position: absolute; top: 0; right: 0; background-color: #99bdff; opacity: 0.8; transition-duration: 0.3s; height: 100%; width: 100%; z-index: 2; } .nlmHighlight112[data-elem-type="button"] .tn-atom *{ background-color: inherit; } .nlmHighlight112[data-elem-type="button"] .tn-atom .line { display: block; text-align: center; width: 93%!important; margin: 0 auto; } .nlmHighlight112[data-elem-type="button"] .line-mask { position: absolute; top: 0; right: 0; /*background-color: inherit;*/ opacity: 0.8; transition-duration: 0.3s; height: 100%; width: 100%; z-index: 2; } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script> <script src="https://unpkg.com/split-type"></script> <script> (function(){ function n_ready(t) { "loading" != document.readyState ? t() : document.addEventListener ? document.addEventListener("DOMContentLoaded", t) : document.attachEvent("onreadystatechange", function() { "loading" != document.readyState && t() }) } n_ready(function(){ function checkElement() { if ($('.nlmHighlight112 .tn-atom').length > 0) { clearInterval(checkElementInterval); initAnimation(); } }; let checkElementInterval = setInterval(checkElement, 100); setTimeout(()=>clearInterval(checkElementInterval),5000); function initAnimation() { console.log(document.querySelectorAll('.bla')); $('.nlmHighlight112 .tn-atom').addClass("split-mt"); let typeSplit; function runSplit() { typeSplit = new SplitType(".split-mt", { types: "lines, words" }); $(".line").append("<div class='line-mask'></div>"); console.log(typeSplit); createAnimation(); } runSplit(); let windowWidth = $(window).innerWidth(); window.addEventListener("resize", function () { if (windowWidth !== $(window).innerWidth()) { windowWidth = $(window).innerWidth(); typeSplit.revert(); runSplit(); } }); gsap.registerPlugin(ScrollTrigger); createAnimation(); } function createAnimation() { ScrollTrigger.getAll().forEach(st => st.kill()); $(".line").each(function (index) { let tl = gsap.timeline({ scrollTrigger: { trigger: $(this), start: "top center", end: "bottom center", scrub: 1 } }); tl.to($(this).find(".line-mask"), { width: "0%", duration: 1 }); }); } let currentPageHeight = 0; let intChangeHeight = setInterval(function() { let body = document.body; let html = document.documentElement; let height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight); if (currentPageHeight == 0) { currentPageHeight = height; } else if (currentPageHeight != height) { currentPageHeight = height; initAnimation(); } }, 10); }); })(); </script>