Каталог кодов:

Внутри — полный набор интерактивных Taplink-кодов, которые закрывают 90% задач дизайна. Каждый код можно настраивать, комбинировать, накладывать на блоки и использовать в любых проектах.

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

Вкладки табы в стиле сторис хайлайтс

Вкладки табы (кнопками)

Можно загрузить любое наполнение для каждой вкладки, с установкой ссылок. Цвета, шрифты, отступы и анимацию можно легко настроить под себя.

Этот код создаёт анимированный счётчик, который плавно увеличивает число от 0 до заданного значения.

Счетчик цифр с текстом под ним

Счетчик цифр с наложением на любой блок сверху

Можно разместить поверх любого баннера или картинки/видео — цифры аккуратно «заходят» сверху и создают современный визуальный эффект.

Анимация выделения текста (эффект iOS)

Этот код создаёт эффект живого выделения текста — как в iOS/macOS: появляется цветная подложка, затем — вертикальные маркеры и точки-ручки.

Внутри 2 кода (классический и с наложением на любой блок сверху)

Бегущая строка из текста

Внутри 3 кода: обычная версия, вариант с наложением поверх верхнего блока и эффектная строка, которая уходит под прозрачный элемент. В каждом варианте есть настройки для редактирования шрифта, размера, скорости, межбуквенного интервала, отдельно для Пк и телефона.

Внутри 4 кода: обычная, обычная с наложением на верхний блок, с кнопкой и с кнопкой и наложением на верхний блок.

Подложка из реалистичной посиковой строки на которой фразы автоматически печатаются, стираются и сменяются другими.

Анимированная поисковая строка

Эффект печатной машинки

Эффект «печатной машинки» — Можно настраивать цвет, размер, жирность, межбуквенный и межстрочный интервал отдельно для ПК и мобилки, а также внешний вид курсора.

Внутри 2 кода: обычная версия и с наложением на блок выше

Волнистая бегущая лента с текстом

Динамичная волнистая лента. Текст идёт по изгибающейся кривой, как по гибкой ленте.

Внутри 3 кода: обычная версия, с наложением на блок выше сверху, и с наложением на верхний блок под пнг объект.

Вертикальный скролл слов

Слова или фразы мягко движутся снизу вверх по одной строке, создавая впечатление живого, динамичного заголовка.

Внутри 2 кода: обычная версия и с наложением поверх другого блока.

Эффект последовательного появления изображений при скролле.

Внутри 3 кода в разными анимациями: обычный прямой, с наклоном и с zoom эффектом

Вертикальный скролл карточек

Горизонтальный скролл карточек

Этот код создаёт горизонтальную «стопку» карточек (изображений), которая анимируется при вертикальном скролле страницы.

Внутри 2 кода - обычный и вариант с наклоном

Параллакс сквозь элементы

При скролле страницы отдельные PNG-карточки по очереди «пролетают» мимо фиксированного текста. Текст остаётся в центре экрана, а элементы двигаются вверх.

Внутри 2 кода: либо картинки пролетают над текстом, либо размытый фон из PNG под заголовком.

Хаотичный параллакс элементов

Прозрачные изображения поднимаются по очереди при прокрутке страницы. Каждый слой фиксируется чуть ниже предыдущего, создавая эффект глубины, наложения и трёхмерного движения. Можно вставить ссылку на любое изображение.

PNG, которые хаотично располагаются внизу экрана и по нажатию «всплывают» наверх, фиксируются там и всегда становятся поверх остальных. Каждая карточка имеет индивидуальную высоту подъёма, что создаёт эффект живой композиции.

Поочередный подъем картинок при нажатии на них

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

Flip карточки с анимированным переворотом

Вкладки аккордеон

Этот код создаёт аккуратные раскрывающиеся карточки-изображения: в закрытом виде видно только верхнюю часть картинки, при нажатии она плавно раскрывается вниз до полной высоты, остальные карточки автоматически закрываются, а стрелка в правом верхнем углу меняет направление, показывая состояние. Можно установить ссылку.

Pop-up модальное окно

Универсальный блок с карточками-изображениями, которые при нажатии открывают крупный макет в модальном окне: на компьютере - центрированное всплывающее окно, на телефоне - выезжающая снизу шторка.

Выезжающий скрытый баннер

Виджет, который открывается по нажатию на кнопку внизу экрана. Баннер плавно выезжает справа поверх интерфейса, позволяет размещать любое изображение-баннер с кликабельной ссылкой.

В наборе 2 кода: обычный баннер с кнопкой, и баннер с таймером обратного отсчета.

Фиксированный баннер, который появляется у нижнего края экрана и полностью кликабелен как кнопка. Есть вариант с автопоявлением - спустя несколько секунд.

Внутри 2 кода: появление сразу, и спустя время.

Автопоявление баннера при открытии страницы

Раскрывающиеся баннеры

Это виджет с несколькими баннерами-картинками, где у каждого есть две версии: основная и альтернативная. При клике первая картинка мгновенно меняется на вторую, а все остальные баннеры автоматически возвращаются в исходное состояние.

Каждый кружок открывает свою полноэкранную галерею с перелистыванием свайпами и стрелками.

Внутри 2 кода: вариант на 4 кружка центрируется по ширине и может переноситься на две строки, вариант на 6 кружков выстраивает кружки в одну линию с горизонтальным свайпом без видимой полоски скролла.

Галерея в стиле сторис хайлайтс

Автоматическая галерея изображений

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

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

Галерея в стиле полароид

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

Галлерея до/после

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

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

Внутри 2 кода: обычный, и с наложением поверх другого блока.

Бегущая строка из изображений

Анимация эффекта картинок в стиле GIF

Изображения автоматически и бесконечно сменяются на одном месте, создавая эффект живой динамики. Код поддерживает прозрачные PNG.

Внутри 2 кода: обычный, и с наложением поверх другого блока.

Интерактивные бургер-меню: полноэкранные (с однотонным фоном или собственной картинкой) и компактные выезжающие панели сверху и сбоку.

Выезжающие меню бургер (4 кода внутри)

Прелоадер с процентами загрузки

Этот прелоадер создаёт аккуратную анимацию загрузки с процентами, которые плавно увеличиваются от 0 до 100.

Прелоадер с процентами загрузки (вариант 2)

Этот прелоадер создаёт аккуратную анимацию загрузки с процентами, которые плавно увеличиваются от 0 до 100

Прелоадер со сменой слов

Этот прелоадер показывает последовательно сменяющиеся слова или фразы, создавая эффект живой загрузки перед появлением основного контента. 

Этот код создаёт аккуратный FAQ-аккордеон в минималистичном стиле. Вопросы оформлены крупным заголовком, стрелка плавно поворачивается при открытии, а тонкая разделительная линия «уезжает» вниз вместе с раскрывающимся блоком.

Внутри 2 кода: с иконкой стрелкой, и своей иконкой.

FAQ-Аккордеон минималистичный

FAQ-Аккордеон с тонкой рамкой

Вопросы оформлены крупным заголовком, стрелка плавно поворачивается при открытии, а тонкий прямоугольник рамка расширяется вниз вместе с раскрывающимся блоком. Разная адаптация размера шрифта под мобильную и компьютерную версию + можно регулировать межбуквенный интервал.

FAQ-аккордеон с автосменой фона открытого вопроса

FAQ-блок с плавной анимацией, плюс-иконкой, сменой цвета у открытого вопроса и адаптивной типографикой.

Анимированные разделители - которые имеют анимацию при скролле страницы.

Внутри 3 кода: разделитель линия-волна, разделитель с сердечком (или вашей иконкой), разделитель с текстом.

Анимированные разделители

Наложение блоков на другие блоки

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

Таймер обратного отсчета

Этот код создаёт адаптивный таймер обратного отсчёта, внутри есть два кода: классический вариант, и вариант таймера который автоматически накладывается на предыдущий блок, «заходя» сверху.

3D-Постер с наклоном и слежением

Этот код превращает любое изображение с прозрачностью в интерактивный 3D-объект, который реагирует на движение курсора или пальца. Постер наклоняется в пространстве, создаёт эффект глубины, мягкий бликовый свет и выглядит максимально “живым”.

Блок с аккуратной подложкой и репликами, оформленными как переписка в мессенджере. Есть аватарки, пузырьки сообщений слева и справа, звёздочки рейтинга, скрин с результатами/примерами, разделение по дням и анимация появления реплик при прокрутке. Отдельные сообщения могут имитировать состояние «Печатает», создавая ощущение живой переписки. Можно добавлять любую длину сообщений - код автоматически подстроится.

Отзывы в виде чата

Анимация появления для стандартных блоков

Эти коды добавляют анимации появления для любых стандартных блоков — по имени блока в его настройках. Можно комбинировать на одной странице. Анимация запускается при попадании блока в область видимости.

Внутри 3 кода: появление справа, появление слева, zoom появление

Таймлайн этапов

Вертикальный “сторис”-таймлайн — это аккуратный блок, который показывает путь клиента или процесс работы шаг за шагом: с аватарками, подписями и плавным появлением при скролле. Каждый шаг анимируется, текущий этап мягко пульсирует, а шрифт и размеры текста отдельно настраиваются для компьютера и мобильной версии.

Перетаскиваемые пнг элементы

Этот код добавляет в Taplink интерактивные PNG-элементы, которые лежат внизу блока и которые пользователь может свободно перетаскивать по экрану. Картинки работают как кликабельные ссылки, остаются поверх других блоков и могут подниматься на верхние секции страницы. Для каждого PNG можно задать собственный размер, ссылку и порядок отображения.

Закрепленная кнопка снизу

Закреплённая внизу экрана круглая кнопка, которая всегда остаётся на виду поверх контента. Она используется как быстрый CTA-элемент: переход в мессенджер, запись, консультация, ссылка на чат, каталог или любой другой важный переход.

Внутри 3 кода: обычная кнопка, с анимацией пульсации, и вращением.

Почему эти коды — лучший выбор для дизайнеров и специалистов Taplink

Я долго работала с Taplink и видела, насколько ограничены стандартные эффекты. Мне хотелось той же пластичности и красоты, как на Tilda — поэтому я создала свои коды.

Идеальная мобильная адаптация

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

Больше не нужно выбирать: сделать красиво на телефоне или на ПК. Теперь всё работает гармонично сразу в двух версиях.

/ 01

Сочетаются
между собой

Коды можно комбинировать, накладывать, собирать в сложные композиции — они не конфликтуют.

/ 03

Наложение
на блоки выше

У многих кодов есть эффект вылета / перекрытия предыдущих блоков, что делает сайт живым и дорогим.

/ 04

Удобный личный кабинет

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

/ 05

Коды абсолютно уникальны

Все написано вручную под Taplink. Никаких шаблонов, никаких чужих решений. Каждый код — кастомный, продуманный и не встречается в открытом доступе.

/ 02

Получите доступ
ко всем Taplink-кодам

доступна оплата в рассрочку / Яндекс.сплит / Долями, а также оплата картой любой страны

11 900 ₽