IZUM.STUDY

⚡️ Study-пятница от IZUM

Сегодня у нас новый скрипт из серии "делаем красиво без боли" 🤘

👉 Смотреть демку

Это GSAP SplitText + SplitType в свежей адаптации.

Что делает:

- Текст эффектно появляется из маски, под углом.
- Можно выбрать разный стиль: построчно, без наклона, с вариациями.
- Есть гибкая система пауз: можно выделить три типа заголовков, и у каждого будет своя задержка.
- Настройка маски уехала в CSS, так что при вёрстке не нужно городить лишние div’ы.

Код максимально чистый, как мы любим.

➡️ CSS и сам код будет в комментах под этим постом

Мы протестили скрипт в бою и все работает стабильно и даёт классный динамичный акцент на заголовках ✨

⚡️ Мы стараемся, чтобы у вас были только самые удобные решения для работы с анимацией.

❓ А вам больше нравится, когда текст выезжает под углом или когда он появляется строка за строкой?

Дайте знать реакцией нравиться ли вам наш новый формат👇

🔥 Всем привет! Запускаем новую рубрику на Izum Study 🚀

🤘 Каждую неделю мы будем делиться скриптами, которые сами юзаем при вертске на Taptop. Никакой теории ради теории, только то, что реально работает и прокачивает проекты 💡

⚡️ И открывает серию GSAP SplitText:
Текст появляется побуквенно, причём буквы вылетают в хаотическом порядке. Смотрится динамично, цепляет взгляд и идеально ложится на заголовки.

👉 Посмотреть в деле можно тут:
https://scripts.taptop.site/split-type

📎 А вот и готовый код (копируй, вставляй и кайфуй):

<!--Подключить GSAP-->
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/SplitText.min.js"></script>

<!--ПОДРОБНО С ПАУЗАМИ-->
<script>
// Регистрируем необходимые плагины
gsap.registerPlugin(ScrollTrigger, SplitText);

// Ждём, пока шрифты загрузятся, чтобы не было смещений при разбиении текста
document.fonts.ready.then(() => {

// Выбираем все элементы с классом .scramble-title
document.querySelectorAll('.scramble-title').forEach(el => {
// 1) Изначально скрываем весь элемент, чтобы он плавно появился при анимации
gsap.set(el, { opacity: 0 });

// 2) Разбиваем текст элемента на строки и символы
const split = SplitText.create(el, {
type: 'lines, chars' // разбиваем на строки и символы
});

const lines = split.lines; // массив строк
const chars = split.chars; // массив символов

// 3) Для каждой строки явно задаём стили, чтобы сохранить переносы и положение
lines.forEach(line => {
gsap.set(line, {
display: 'block', // строки будут блочными — сохранят свою высоту
position: 'relative' // важно для правильного позиционирования анимации
});
});

// 4) Создаём ScrollTrigger, который запускает анимацию при появлении элемента на экране
ScrollTrigger.create({
trigger: el, // сам элемент
start: 'top 85%', // когда верх элемента достигает 85% высоты экрана
once: true, // анимация срабатывает только один раз

onEnter: () => {
// 5) Если элемент имеет класс .first — применяем задержку 4.2 сек
const delay = el.classList.contains('first') ? 4.2 : 0.1;

// 6) Плавно проявляем весь элемент (контейнер)
gsap.to(el, {
delay: delay, // задержка перед появлением
duration: 0.3, // скорость проявления opacity
opacity: 1,
ease: 'none' // без затухания
});

// 7) Анимация появления каждого символа
gsap.from(chars, {
delay: delay, // тот же delay, что и у opacity
duration: 1.8, // длительность анимации каждого символа
opacity: 0, // стартовая прозрачность
scale: 1, // начальное уменьшение
rotation: 0, // поворот (можно менять вручную)
filter: 'none', // размытие в начале
transformOrigin: '50% 50%', // точка трансформации
ease: 'power3.out', // плавное затухание
stagger: {
each: 0.03, // задержка между каждым символом
from: 'random' // порядок хаотичный
}
});
}
});
});
});

</script>

⚡️ Мы уже используем его на Taptop. Все работает без сучка и задоринки.
Так что берите на заметку, экспериментируйте и сохраняйте в копилку.

💪 Мы стараемся собирать такие штуки специально для вас, чтобы экономить ваше время и давать готовые решения.

Нравится ли вам такой формат друзья?
Жмите реакции 👇 Так мы поймём, стоит ли продолжать данную рубрику.

А через неделю будет новая порция скриптов от IZUM 😎 Чао какао. Всех обняли.

🔥 Салют, друзья!

У нас припасён ещё один свежий шаблон, который наконец-то дождался своего часа. Встречайте: Парко.

😎 Это лендинг для настоящей русской бани. Атмосфера пара, отдыха и заряда сил - всё в одном месте. Внутри можно показать залы, рассказать про мастеров, цены, отзывы гостей и записаться на сеанс. Такой формат идеально подойдёт для банных комплексов, SPA и любых пространств, где важна не только услуга, но и настроение.

⚡️ Собрали его на Taptop в нашем стиле: всё максимально нативно, без костылей и перегруза. Из скриптов только плавный скролл и появление/исчезновение меню при прокрутке. Всё остальное чистый натив, чтобы страница работала быстро и легко.

🤘 Внутри: аккуратная структура, плавные анимации, фотогалерея и блоки, которые создают правильную атмосферу. Посетитель заходит и с первых секунд понимает, куда попал и зачем ему здесь остаться.

👀 Вживую можно посмотреть тут:
👉 https://parko.taptop.site/

🥇 Этот шаблон мы включили в программу обучения, будем разбирать его на практике, чтобы наши ученики могли прокачаться на реальном проекте, а не сырой теории.

И ещё приятные моменты: дизайн для него специально сделал @Vitalli_13, а вёрсткой занималась участница нашего первого потока: @eleo_bo. Для нас это особая гордость, видеть, как ребята растут и уже вносят вклад в настоящие проекты.

Спасибо, что подталкиваете нас делиться такими проектами. Парко пролежал на полке дольше, чем должен был, но теперь мы рады его показать. Впереди ещё несколько таких шаблонов, так что пристегивайтесь, жарку мы еще подкинем 🔥

Будем благодарны коллегам за поддержку 👇. Обняли. Ваш IZUM. 😎

🔥 Салют, друзья! У нас новая коллаба и новый кейс, и он был прям с огоньком.

Недавно к нам пришли девчата из е-б эдженси с задачей: сверстать лендинг про БАД, который восполняет запасы железа в организме.

Казалось бы, ну что такого, лендинг и лендинг. Но как только мы увидели дизайн, стало понятно: это будет не "ещё одна страничка", а настоящий аттракцион в том числе и для нашего разраба 😂.

Каждое движение, каждый скролл должен был работать как маленькое шоу. И в этот момент мы такие: "Ну всё, веселье начинается, поехали". 😎

Мы закатали рукава, открыли TapTop, взяли годовой запас кофе и пошли верстать, заодно решили проверить на что реально способен TapTop в боевых условиях. 👀

Честно? Пару раз сидели ночью и ловили себя на мысли: "А оно нам надо вообще" 😂 Но потом включали турбированый режим и мотивировали себя одной мыслью: "решение точно будет найдено" и шли дальше. Потому что именно в таких проектах появляется настоящий драйв.

🤘В итоге после бессонных ночей и порой ругани в команде вот что получилось:

✨ анимированные иконки железа перелетаюь из блока в блок
✨ капсулы разлетаются шариками и поднимают уровень эритроцитов
✨ заголовки выплывают из блюра
✨ анимаций столько, что страница ощущается "живой" с первого скролла

И еще на секундочку: у нас было ровно 8 дней на верстку, что еще сильнее поддавало жарку, особенно когда "план шел не по плану" 👀 Но подвести было нельзя.

💪 В итоге 90% всего мы сделали нативно. Скрипты только там, где без них ну совсем никак (например, GSAP для заголовков).

👀 Хотите увидеть всё это вживую? Ловите ссылочку:
👉 https://bonoferlat.ru

Спасибо девчатам из е-б эдженси за смелость в дизайне и за то, что не боятся придумывать безумные идеи. Именно такие проекты мы любим: где сначала думаешь что это нереально, а потом смотришь на результат и понимаешь - это точно стоило всех бессонных ночей.

А впереди нас ждёт ещё больше челленджей и экспериментов. Так что пристегивайтесь - будет жарко! 🔥

Будем на связи. Ваш IZUM. 😎

👀 Показываем один из шаблонов, на которых будет строиться обучение в Izum Study.

Это не просто макет - это полноценный тренажёр для верстальщиков, в нем нет ни строчки мусора, тк он собран на 90% нативно, без костылей.

💡 Что в нём особенного:

✅ нестандартная структура лендинга
✅ современный визуал
✅ типографика и анимации
✅ немного кастомных скриптов: pop-up c куками, плавный скролл и фиксированное меню которое появляется при скролле вверх и прячется при скролле вниз.

И да, мы предоставим все кастомные скрипты в рамках программы. Вам нужно будет только разобраться, повторить, адаптировать и понять, как это делается.

🙈 Мы могли бы дать простой макет, но это было бы нечестно. Поэтому и шаблоны со всеми нюансами:
разные гриды, адаптив, микроанимации, hover-состояния, поведение меню и пр. Все как в жизни.

⚙️ Всё это участники менторства будут собирать своими руками под нашим личным руководством.

В программе:

2 лендинга + 2 многостраничника - вот на чём мы учим. Не вода и теория, только практика, только хардкор. Мы обучаем не "для галочки", а на реальных боевых сайтах, как в студии.

👉 Смотреть шаблон. Его мы кстати собрали вместе с нашей ученицей Элеонорой.

Это часть подхода, где ты не просто учишься "как надо", а делаешь как надо.

😎 Хочешь так же? Ты знаешь где нас искать 🔗 IZUM.STUDY

🔗 CSS Anchor Positioning: новая фича 2025, которую вы почти наверняка пропустили.

Tooltip без absolute, попап без JavaScript, адаптив без головной боли. Всё в пару строк чистого CSS.

Всем привет. И так в наших интернетах почти все пропустили одну важную новость.

🤯 Что вообще случилось?

В мае 2025 CSS наконец-то научился «приклеивать» один элемент к другому без JS и абсолютных координат.

Это называется Anchor Positioning, и оно уже работает в Chrome, Edge и даже в Safari 🙈(в Firefox пока за флагом).

Теперь вы можете сделать tooltip, выпадашку или подсказку, которая:

- всегда будет рядом с нужным элементом
- сама поменяет положение, если не влезает
- вообще ни разу не попросит JS

📲 Те теперь никаких position: absolute, left: 50%, transform: translateX(-50%), никаких Popper.js.

Тултип сам найдёт например кнопку, сам к ней приклеится и сам сдвинется, если не поместится.
Хочешь по центру сверху - пожалуйста. Не влезает то упадёт вниз. Не влезает и там прыгнет вправо.

🧪 Где уже работает:

✅ Chrome 118+
✅ Edge 118+
✅ Safari 17.4
🔜 Firefox (пока через флаг)
📊 Покрытие: уже ~71 % пользователей по данным Can I Use

🧠 Зачем оно тебе:

- Tooltip никогда не вылетит за экран.
- Не надо JS.
- Не надо вычислять высоту/ширину, чтобы двигать.
- Элемент «ведёт себя» сам, как взрослый.
- CSS наконец стал чуть умнее.

📦 Краткие выводы:

Anchor Positioning это не просто фича, это новый слой логики в CSS

Теперь браузер сам определяет наилучшее положение, а CSS впервые стал реагирующим без JS. Это значит:

Визуальные редакторы (Taptop, Webflow и пр) должны будут внедрять новую логику интерфейсов, чтобы дать доступ к anchor'ам, position-try, fallback'ам и пр.

Многие UI-библиотеки, особенно no-code и low-code, основанные на фиксированных координатах, устаревают. Примеры: Tippy.js, Dropdown'ы в Bootstrap, старые Popper-конструкторы.

ИИ верстка: это уже реальный огромный шаг в сторону "авто-импорта" из Figma

ИИ-сервисы раньше не могли точно предсказать поведение таких интерактивных элементов, потому что всё строилось на костылях.

Теперь же авто-верстка выходит за рамки flex/grid и может начать реально генерировать динамически адаптирующиеся интерфейсы.

Так что теперь у ИИ появляется шанс делать не просто красивые блоки, а функциональные, живые интерфейсы, без JS-хака.

🚀 Что это значит для сферы?

Мы уходим от эпохи, где интерфейс собирался из "блоков", "позиционируй и молись".

Теперь CSS сам умеет решать, где лучше показать элемент, без лишнего кода.
А значит: билдерам, редакторам и даже ИИ-помощникам придётся учиться по-новому.

👀 И походу это только начало. В интересное время живем однако. Всех обняли.

📌 Чек-лист для беседы с заказчиком: «Taptop vs Tilda»

Мы в IZUM очень часто сталкиваемся с тем, что у заказчиков Taptop = Tilda. Но тк мы знаем, что это совершенно разные вещи, мы подготовили для вас чек-лист самых частых вопросов. Сохраняй, что бы не забыть, завтра пригодится. 😎

Формат: вопрос клиента - ответ дизайнера/разработчика.

✅ 1. Так Taptop это та-же Tilda, только на тильде больше пары сотен готовых блоков, значит сайт можно собрать быстрее. Зачем тогда Taptop?

Вы: Да, Tilda даёт быстрый старт, но цена скорости - это в первую очередь типовой внешний вид. В Taptop вы создаёте макет с нуля прямо в визуальном редакторе: ни одного «жёсткого» шаблона, полная свобода расположения элементов и стилизации.

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

Так же тут стоит указать что, Taptop это все же больше визуальный редактор кода, а Tilda это конструктор:

Если вам нужны тонкие настройки: например индивидуальные радиусы углов, сложные ховеры и пр. то лучше смотреть в сторону Taptop, потому что:

В Taptop можно менять любые CSS-свойства прямо в интерфейсе, добавлять свои custom-properties, копировать стили из Figma и настраивать состояния «hover / focus / active» и многое другое.

В Tilda большая часть свойств (например, разные радиусы на каждом углу) просто недоступна.

Не особо вникайте в техническую часть, чаще всего клиенты все равно не обладают особой экспертизой. Они просто хотят услышать ее от вас.

✅ 2. Сайт должен идеально выглядеть и на мобилках, и на широких экранах тоже.

Вы: В Taptop вы задаёте собственные брейк-поинты (1280, 1440, 1920 px и любые другие) и отдельно настраиваете стили для каждого. Плюс автолэйауты ускоряют перестройку блоков под мобильные.

В Tilda широкие экраны не поддерживаются, а Zero-блоки приходится адаптировать вручную для каждого вам нужного размера.

✅ 3. Важно, чтобы сайт грузился быстро и хорошо ранжировался в Google/Яндекс.

Вы: Taptop генерирует чистый, компактный HTML/CSS/JS. Вы сами выбираете теги и семантику, поэтому страница получает высокие показатели Core Web Vitals.

У Tilda код «раздут» сервисными блоками, что замедляет загрузку проектов.

✅ 4. Если понадобится перенести проект к разработчикам, сможем ли мы выгрузить код ?

Вы: Да. В Taptop вы экспортируете весь проект папками (HTML, CSS, JS), в том числе минифицированный вариант, и полностью владeете этим кодом, можете дорабатывать где угодно.

У Tilda экспорт есть, но платформа оставляет за собой авторские права и запрещает изменять файлы вне сервиса.

✅ 5. У меня над сайтом будет работать команда: копирайтер, SEO-спец, дизайнер. Есть совместная работа?

Вы: В Taptop можно создать отдельную команду, назначить роли и гибко настроить права как на уровне всей рабочей области, так и конкретного проекта. Проекты удобно передавать между командами.

В Tilda сотрудники добавляются только к одному общему проекту, полноценному «workspace» без распределения прав доступа.

✅ 6. Мой SEO спец спрашивает: что ему будет нужно править robots.txt, карту сайта, редиректы. Есть доступ?

Вы: Taptop позволяет вручную редактировать robots.txt, sitemap (или генерировать автоматически) и настраивать редиректы; мета-теги можно задавать через SEO-переменные.

В Tilda файлы генерируются автоматически и не редактируются, хотя сервис предлагает базовый SEO-аудит.

✅ 7. Мне нужны интеграции: лиды в Telegram, web-hook в CRM, оплата через онлайн банки?

Вы: Taptop отдаёт данные форм а так же шлёт уведомления в Telegram, подключается к AmoCRM, Битрикс24 и имеет еще более 800 one-click интеграций через сервис Albato (он кстати бесплатен для пользователей Taptop), а так же имеет интеграции с 20+ платёжными системами. Всё настраивается в кабинете, без сторонних скриптов.

🔝 Верстайте на Taptop. Общайтесь красиво. Всех обняли. Ваш IZUM.

Будем благодарны за ❤️🔥😎 👇

🙂 Привет Друзья. Недавно мы писали пост о просто кладезе анимаций на React.

Для тех, кто не понял, насколько это просто мега супер полезная штука. Зайдите на сайт еще раз. И посмотрите сколько там всего 😱

➡️ Там вам и анимации текста и фоны и фракталы и компоненты. Сотни анимаций. Бесплатно, с возможностью настройки эффекта прямо на сайте и выгрузке кода без регистраций и смс.

Красиво, кастомно, современно. Но... Причем тут React спросите вы?

🎯 Если ты верстаешь на Taptop (то правильно делаешь), ты понимаешь конечно:
React-библиотеки “из коробки” туда не прикрутить.

🔧 Просто потому что:
– Taptop не поддерживают React-рендер
– это не полноценная среда разработки
– а React всё-таки фреймворк, ему нужен свой рантайм

👀 Но обойдемся без сложных слов. Сейчас всё покажем.

🛠 Как использовать reactbits-анимации у себя:

Заходишь на reactbits.dev

Крутишь эффекты, выбираешь нужное, настраиваешь прямо на сайте.
Копируешь полученный код

😜 Дальше идешь в любую ИИ (DeepSeek, Kimi - работают из СНГ)

Пишешь простой промт:

"Сделай, чтобы это работало на Webflow" или просто: "Переведи на чистый HTML/CSS/JS"
(да в ИИ пишем именно WebFlow, потому что они порой не знают что такое Taptop, а зря)

и грузишь весь код с сайта reactbits.dev вместе с промтом 😎

🔥 Всё. У тебя чистая рабочая версия без React, которую можно вставлять в Taptop и вообще хоть куда, но лучше в Taptop.

➡️Мы протестили - всё работает как надо (cсылка).

Делайте красиво ❤️

⚡️ Почему сейчас идеальное время учиться верстать на Taptop

👀 Посмотрите вокруг:

Cloudflare — нестабилен (а на их CDN до 90% скриптов)
WordPress-плагины — всё чаще отваливаются для РФ.
Сервисы то блокируют, то режут доступ.
Но все продолжают ждать, “когда всё устаканится”.

💯 А реальность такая:

– верстальщики ломят ценник
– сроки растут
– а ты всё ещё сидишь с макетом и надеешься на чудо

🥇 Если хочешь быть не просто дизайнером, а человеком, который запускает сайты, то пора вставать с лавки.

🚫 Taptop - это не Tilda.

Это ближе к Figma, только вместо прототипа — сразу живой, рабочий сайт.

✔️ Автолейауты
✔️ Брейкпоинты
✔️ Компоненты
✔️ Полная свобода, и всё это - визуально, но с возможностью ручного CSS, если надо

Мы сами сначала скептически смотрели.
«Очередной визуальный редактор?..»

А потом собрали пару проектов и втянулись.
Теперь не хотим возвращаться к другим конструкторам.

🔝 Спрос на Taptop только растет. А дальше будет только больше:

– отечественный сервис
– растущее комьюнити
– удобство для дизайнеров

Если ты хочешь быть на шаг впереди то учиться надо не “потом”, а сейчас.

⏳ Не время прокрастинировать. Пора верстать.
🔗 taptop.pro

И что бы не быть голословными посмотрите что мы собрали на TapTop:

➡️ IZUM.STUDY

HTML Academy и IZUM — теперь партнёры. Выпускники флагманских программ HTML Academy, соответствующих стандартам IT-гигантов, смогут попасть в команду IZUM

Подробнее: https://tml.io/bigtech-izum

Izum Digital — агентство, которое специализируется на разработке креативных сайтов на TapTop и WebFlow. Мы добавляем изюминку в каждый проект, делая его особенным и запоминающимся. Телеграм агентства — https://t.me/IZUMDIGITAL

#работодателиhtmlacademy

Выходное-полезное. 😎

Подборка самых нужных сниппетов для фронтенда — всё с кодом и без лишней воды.

Внутри тонна всего: обработка кликов вне блока, фоны, переключатели, списки, меню, текстовые анимации — бери и вставляй.

Выглядит дорого-богато, работает быстро, подключается просто. Обновляют регулярно.

И всё это бесплатно, котятки.

🔗 reactbits.dev — сохрани, пригодится в понедельник 🙈

#полезное

Всем привет 👋 Если помните, мы пару постов назад очень тонко намекали, что ждём не дождёмся нового потока AVA SRG.

Короче, мы с ней запартнёрились🔥
А это значит, что:

▪️ Ребята из Шараги отбирают лучший ученический дизайн лендоса в каждом потоке и присылают нам. А мы его верстаем и отправляем на всякие понтовые российские и забугорные конкурсы — например, на awwwards

▪️Мы эксклюзивные партнёры AVA SRG по работе на Taptop и получаем от них коммерческие проекты на вёрстку. А помогают нам студенты менторской программы IZUM STUDY. Один такой уже скоро будет готов — дизайн-кейс можно глянуть на Dprofile

Силой данною нам Матерью Шараги объявляем, что это — коллаб века 🪄

Всем привет! 👋 Сегодня расскажем о ещё одной фиче, которую мы добавили на сайт IZUM STUDY с помощью Taptop. Это мы сейчас про плавный скролл (или smooth scroll) Lenis

Lenis — JS-библиотека для создания плавных скроллов. Прокрутка по умолчанию следует чётко за колёсиком. А с Lenis — будет немного отставать.

Lenis поможет сделать анимацию на странице эффектнее. Ещё с его помощью можно связать между собой дизайн-элементы. Например, на сайте IZUM STUDY плавный скролл перекликается с таким же плавным развёртыванием меню (подробнее о нём — в другом посте).

В отличие от многих других видов плавного скролла, Lenis хорошо сочетается с тачпадом. А ещё эта библиотека регулярно обновляется. Поэтому скролл не будет слетать в последних версиях браузеров.

О чём важно помнить?
▪️Не перебащивайте: не всем заходит, когда страница прокручивается слишком туго или плавно. На простых сайтах без анимации плавный скролл вообще не нужен.

▪️Плавный скролл обычно используют только для ПК-версии. У девайсов с тачскринами есть своя внутренняя прокрутка. Чтобы один скролл не накладывался на другой, нужно отключить smooth scroll во всех адаптивных версиях.

▪️Чтобы плавный скролл работал в Safari, нужно прописать дополнительные стили в скрипте. Там же можно настроить характеристики скролла — например, отрегулировать плавность и жёсткость.

Скрипты — в комментах 👀

А вот и обещанный кейс 🥳

Сделали новый сайт и фирменный стиль для крупнейшей компании в деревообработке — БАДО.

Показываем самые сочные кусочки айдентики и дизайна.
Остальное — на Dprofile и Behance.