Готовые коды
для Taplink:
быстро, удобно, красиво
для Taplink:
быстро, удобно, красиво
Каталог кодов:
Внутри — полный набор интерактивных Taplink-кодов, которые закрывают 90% задач дизайна. Каждый код можно настраивать, комбинировать, накладывать на блоки и использовать в любых проектах.
Отдельно можно загрузить изображение для обложки, отдельно наполнение для каждой вкладки, с установкой ссылок
Вкладки табы в стиле сторис хайлайтс
Вкладки табы (кнопками)
Можно загрузить любое наполнение для каждой вкладки, с установкой ссылок. Цвета, шрифты, отступы и анимацию можно легко настроить под себя.
Этот код создаёт анимированный счётчик, который плавно увеличивает число от 0 до заданного значения.
Счетчик цифр с текстом под ним
Счетчик цифр с наложением на любой блок сверху
Можно разместить поверх любого баннера или картинки/видео — цифры аккуратно «накладываются» сверху и создают вау эффект. Можно менять выравнивание, размеры, отступы и тд.
Анимация выделения текста (эффект iOS)
Этот код создаёт эффект выделения текста - как в стилистике новомодного IOS Core стиля: появляется цветная подложка под текстом, затем — вертикальные маркеры и точки-ручки.
Внутри 2 кода (классический и с наложением на любой блок сверху)
Внутри 2 кода (классический и с наложением на любой блок сверху)
Бегущая строка из текста
Внутри 3 кода: обычная версия, вариант с наложением поверх верхнего блока и вариант бегущей строки которая находится под прозрачный элементом. В каждом варианте есть настройки для редактирования шрифта, размера, скорости, межбуквенного интервала, отдельно для ПК и телефона.
Внутри 4 кода: обычная, обычная с наложением на верхний блок, с кнопкой и с кнопкой и наложением на верхний блок.
Подложка из реалистичной поисковой строки на которой фразы автоматически печатаются, стираются и сменяются другими. На кнопку можно добавить реальную ссылку.
Подложка из реалистичной поисковой строки на которой фразы автоматически печатаются, стираются и сменяются другими. На кнопку можно добавить реальную ссылку.
Анимированная поисковая строка
Эффект печатной машинки
Эффект «печатной машинки» — Можно настраивать цвет, размер, жирность, межбуквенный и межстрочный интервал отдельно для ПК и мобилки, а также внешний вид курсора.
Внутри 2 кода: обычная версия и с наложением на блок выше
Внутри 2 кода: обычная версия и с наложением на блок выше
Волнистая бегущая лента с текстом
Динамичная волнистая лента. Текст идёт по изгибающейся кривой, как по гибкой ленте.
Внутри 3 кода: обычная версия, с наложением на блок выше сверху, и с наложением на верхний блок под пнг объект.
Внутри 3 кода: обычная версия, с наложением на блок выше сверху, и с наложением на верхний блок под пнг объект.
Вертикальный скролл слов
Слова или фразы мягко движутся снизу вверх по одной строке, создавая впечатление живого, динамичного заголовка.
Внутри 2 кода: обычная версия и с наложением поверх другого блока.
Внутри 2 кода: обычная версия и с наложением поверх другого блока.
Эффект последовательного появления изображений при скролле.
Внутри 3 кода в разными анимациями: обычный прямой, с наклоном и с zoom эффектом
Внутри 3 кода в разными анимациями: обычный прямой, с наклоном и с zoom эффектом
Вертикальный скролл карточек
Горизонтальный скролл карточек
Этот код создаёт горизонтальную «стопку» карточек (изображений), которая анимируется при вертикальном скролле страницы.
Внутри 2 кода - обычный и вариант с наклоном
Внутри 2 кода - обычный и вариант с наклоном
Параллакс сквозь элементы
При скролле страницы отдельные PNG-карточки по очереди «пролетают» мимо фиксированного текста. Текст остаётся в центре экрана, а элементы двигаются вверх.
Внутри 2 кода: либо картинки пролетают над текстом, либо размытый фон из PNG под заголовком.
Внутри 2 кода: либо картинки пролетают над текстом, либо размытый фон из PNG под заголовком.
Хаотичный параллакс элементов
Прозрачные изображения поднимаются по очереди при прокрутке страницы. Каждый слой фиксируется чуть ниже предыдущего, создавая эффект глубины, наложения и трёхмерного движения. Можно вставить ссылку на любое изображение.
PNG, которые хаотично располагаются внизу экрана и по нажатию «всплывают» наверх, фиксируются там и всегда становятся поверх остальных. Каждая карточка имеет индивидуальную высоту подъёма, что создаёт эффект живой композиции.
Поочередный подъем картинок при нажатии на них
Интерактивный блок из карточек, которые переворачиваются по ховеру и по клику на мобильных. На обратной стороне можно разместить ссылку — отлично подходит для кнопок, записей и переходов.
Flip карточки с анимированным переворотом
Вкладки аккордеон
Этот код создаёт аккуратные раскрывающиеся карточки-изображения: в закрытом виде видно только верхнюю часть картинки, при нажатии она плавно раскрывается вниз до полной высоты, остальные карточки автоматически закрываются, а стрелка в правом верхнем углу меняет направление, показывая состояние. Можно установить ссылку.
Pop-up модальное окно
Универсальный блок с карточками-изображениями, которые при нажатии открывают крупный макет в модальном окне: на компьютере - центрированное всплывающее окно, на телефоне - выезжающая снизу шторка.
Выезжающий скрытый баннер
Виджет, который открывается по нажатию на кнопку внизу экрана. Баннер плавно выезжает справа поверх интерфейса, позволяет размещать любое изображение-баннер с кликабельной ссылкой.
В наборе 2 кода: обычный баннер с кнопкой, и баннер с таймером обратного отсчета.
В наборе 2 кода: обычный баннер с кнопкой, и баннер с таймером обратного отсчета.
Фиксированный баннер, который появляется у нижнего края экрана и полностью кликабелен как кнопка. Есть вариант с автопоявлением - спустя несколько секунд.
Внутри 2 кода: появление сразу, и спустя время.
Внутри 2 кода: появление сразу, и спустя время.
Автопоявление баннера при открытии страницы
Раскрывающиеся баннеры
Это виджет с несколькими баннерами-картинками, где у каждого есть две версии: основная и альтернативная. При клике первая картинка мгновенно меняется на вторую, а все остальные баннеры автоматически возвращаются в исходное состояние.
Каждый кружок открывает свою полноэкранную галерею с перелистыванием свайпами и стрелками.
Внутри 2 кода: вариант на 4 кружка центрируется по ширине и может переноситься на две строки, вариант на 6 кружков выстраивает кружки в одну линию с горизонтальным свайпом без видимой полоски скролла.
Внутри 2 кода: вариант на 4 кружка центрируется по ширине и может переноситься на две строки, вариант на 6 кружков выстраивает кружки в одну линию с горизонтальным свайпом без видимой полоски скролла.
Галерея в стиле сторис хайлайтс
Автоматическая галерея изображений
Изображения плавно сменяют друг друга, подстраиваются под мобильную и десктоп версию, а высота и скорость переключения легко регулируются. Эффект очень похож на сайты на тильде. Код поддерживает любое количество картинок.
Внутри 3 кода: разная ширина экрана, и доп код чтобы накладывать любой блок сверху на галерею.
Внутри 3 кода: разная ширина экрана, и доп код чтобы накладывать любой блок сверху на галерею.
Галерея в стиле полароид
Адаптивный блок с карточками-фото, выполненными в стиле полароидных снимков. При клике открывается галерея со свайпами, стрелками и перелистыванием. Высоту фотографий, размер рамки, количество колонок и вертикальное положение подписи можно полностью регулировать через переменные в начале стилей.
Галерея до/после
Это интерактивный слайдер с несколькими кейсами, где пользователь может листать работы и вручную двигать ползунок, сравнивая результат до и после. Идеально подходит для мастеров красоты, обучения, дизайна, фото-ретуши и любых проектов с визуальными трансформациями. Можно добавлять любое кол-во до/после внутрь этой галереи.
Интерактивная галерея, в которой ваши изображения двигаются в одну линию, а при касании (на телефоне) или наведении (на компьютере) выбранное фото увеличивается поверх всей страницы.
Внутри 2 кода: обычный, и с наложением поверх другого блока.
Внутри 2 кода: обычный, и с наложением поверх другого блока.
Бегущая строка из изображений
Анимация эффекта картинок в стиле GIF
Изображения автоматически и бесконечно сменяются на одном месте, создавая эффект живой динамики. Код поддерживает прозрачные PNG.
Внутри 2 кода: обычный, и с наложением поверх другого блока.
Внутри 2 кода: обычный, и с наложением поверх другого блока.
Интерактивные бургер-меню: полноэкранные (с однотонным фоном или собственной картинкой) и компактные выезжающие панели сверху и сбоку.
Выезжающие меню бургер (4 кода внутри)
Прелоадер с процентами загрузки
Этот прелоадер создаёт аккуратную анимацию загрузки с процентами, которые плавно увеличиваются от 0 до 100.
Прелоадер с процентами загрузки (вариант 2)
Этот прелоадер создаёт аккуратную анимацию загрузки с процентами, которые плавно увеличиваются от 0 до 100
Прелоадер со сменой слов
Этот прелоадер показывает последовательно сменяющиеся слова или фразы, создавая эффект живой загрузки перед появлением основного контента.
Этот код создаёт аккуратный FAQ-аккордеон в минималистичном стиле. Вопросы оформлены крупным заголовком, стрелка плавно поворачивается при открытии, а тонкая разделительная линия «уезжает» вниз вместе с раскрывающимся блоком.
Внутри 2 кода: с иконкой стрелкой, и своей иконкой.
Внутри 2 кода: с иконкой стрелкой, и своей иконкой.
FAQ-Аккордеон минималистичный
FAQ-Аккордеон с тонкой рамкой
Вопросы оформлены крупным заголовком, стрелка плавно поворачивается при открытии, а тонкий прямоугольник рамка расширяется вниз вместе с раскрывающимся блоком. Разная адаптация размера шрифта под мобильную и компьютерную версию + можно регулировать межбуквенный интервал.
FAQ-аккордеон с автосменой фона открытого вопроса
FAQ-блок с плавной анимацией, плюс-иконкой, сменой цвета у открытого вопроса и адаптивной типографикой.
Анимированные разделители - которые имеют анимацию при скролле страницы.
Внутри 3 кода: разделитель линия-волна, разделитель с сердечком (или вашей иконкой), разделитель с текстом.
Внутри 3 кода: разделитель линия-волна, разделитель с сердечком (или вашей иконкой), разделитель с текстом.
Анимированные разделители
Наложение блоков на другие блоки
Это готовое решение, позволяющее разместить поверх любого блока дополнительный контент: текст, иконки, кнопки, изображения, анимации или декоративные элементы. Например можно наложить галлерею отзывов на блок выше, чтобы был красивый фон снизу.
Таймер обратного отсчета
Этот код создаёт адаптивный таймер обратного отсчёта, внутри есть два кода: классический вариант, и вариант таймера который автоматически накладывается на предыдущий блок, «заходя» сверху.
3D-Постер с наклоном и слежением
Этот код превращает любое изображение с прозрачностью в интерактивный 3D-объект, который реагирует на движение курсора или пальца. Постер наклоняется в пространстве, создаёт эффект глубины, мягкий бликовый свет и выглядит максимально “живым”.
Блок с аккуратной подложкой и репликами, оформленными как переписка в мессенджере. Есть аватарки, пузырьки сообщений слева и справа, звёздочки рейтинга, скрин с результатами/примерами, разделение по дням и анимация появления реплик при прокрутке. Отдельные сообщения могут имитировать состояние «Печатает», создавая ощущение живой переписки. Можно добавлять любую длину сообщений - код автоматически подстроится.
Отзывы в виде чата
Анимация появления для стандартных блоков
Эти коды добавляют анимации появления для любых стандартных блоков — по имени блока в его настройках. Можно комбинировать на одной странице. Анимация запускается при попадании блока в область видимости.
Внутри 3 кода: появление справа, появление слева, zoom появление
Внутри 3 кода: появление справа, появление слева, zoom появление
Таймлайн этапов
Вертикальный “сторис”-таймлайн — это аккуратный блок, который показывает путь клиента или процесс работы шаг за шагом: с аватарками, подписями и плавным появлением при скролле. Каждый шаг анимируется, текущий этап мягко пульсирует, а шрифт и размеры текста отдельно настраиваются для компьютера и мобильной версии.
Перетаскиваемые пнг элементы
Этот код добавляет в Taplink интерактивные PNG-элементы, которые лежат внизу блока и которые пользователь может свободно перетаскивать по экрану. Картинки работают как кликабельные ссылки, остаются поверх других блоков и могут подниматься на верхние секции страницы. Для каждого PNG можно задать собственный размер, ссылку и порядок отображения.
Закрепленная кнопка снизу
Закреплённая внизу экрана круглая кнопка, которая всегда остаётся на виду поверх контента. Она используется как быстрый CTA-элемент: переход в мессенджер, запись, консультация, ссылка на чат, каталог или любой другой важный переход.
Внутри 3 кода: обычная кнопка, с анимацией пульсации, и вращением.
Внутри 3 кода: обычная кнопка, с анимацией пульсации, и вращением.
Почему эти коды — лучший выбор для дизайнеров и специалистов Taplink
Я долго работала с Taplink и видела, насколько ограничены стандартные эффекты. Мне хотелось той же пластичности и красоты, как на Tilda — поэтому я создала свои коды.
Идеальная мобильная адаптация
/ 01
Каждый код имеет мобильные и десктопные настройки, чтобы текст и блоки выглядели корректно в обоих вариантах.
Больше не нужно выбирать: сделать красиво на телефоне или на ПК. Теперь всё работает гармонично сразу в двух версиях.
Больше не нужно выбирать: сделать красиво на телефоне или на ПК. Теперь всё работает гармонично сразу в двух версиях.
<script>
(function() {
const folders = document.querySelectorAll('#slotina-folders-1 .sf-folder');
let topZ = 100;
folders.forEach(folder => { folder.addEventListener('click', e => { e.stopPropagation();
folder.classList.add('sf-active');
topZ++; folder.style.zIndex = topZ; }); }); })(); </script>
(function() {
const folders = document.querySelectorAll('#slotina-folders-1 .sf-folder');
let topZ = 100;
folders.forEach(folder => { folder.addEventListener('click', e => { e.stopPropagation();
folder.classList.add('sf-active');
topZ++; folder.style.zIndex = topZ; }); }); })(); </script>
Коды абсолютно уникальны
Все написано вручную под Taplink. Никаких шаблонов, никаких чужих решений. Каждый код - кастомный, продуманный до мелочей и не встречается в открытом доступе.
/ 02
Коды сочетаются
между собой
между собой
Часть кодов можно объединять и сочетать — создавать объёмные композиции, накладывать эффекты и собирать уникальный визуал.
/ 03
Анимированная галерея
Наложение баннера
Поисковая строка
Наложение
на блоки выше
на блоки выше
Фишка и уникальность моих кодов - это эффект выхода за границы обычных Taplink-блоков. У многих кодов есть классический вариант кода и вариант с наложением на блок выше. Это позволяет создавать полностью уникальный дизайн. С этими кодами никто не поверит что сайт сделан на Таплинк.
/ 04
Удобный личный кабинет
Внутри тебя ждут обучающие видео, сами коды с комментариями в стилях, текстовые инструкции и примеры применения. Всё структурировано - работать легко и понятно.
/ 05
76 кодов
Видеоуроки
Инструкции
Примеры
Почему эти коды — лучший выбор для дизайнеров и специалистов Taplink
Я долго работала с Taplink и видела, насколько ограничены стандартные эффекты. Мне хотелось той же пластичности и красоты, как на Tilda — поэтому я создала свои коды.
Идеальная мобильная адаптация
Каждый код имеет мобильные и десктопные настройки, чтобы текст и блоки выглядели корректно в обоих вариантах.
Больше не нужно выбирать: сделать красиво на телефоне или на ПК. Теперь всё работает гармонично сразу в двух версиях.
Больше не нужно выбирать: сделать красиво на телефоне или на ПК. Теперь всё работает гармонично сразу в двух версиях.
/ 01
<script>
(function() {
const folders = document.querySelectorAll('#slotina-folders-1 .sf-folder');
let topZ = 100;
folders.forEach(folder => { folder.addEventListener('click', e => { e.stopPropagation();
folder.classList.add('sf-active');
topZ++; folder.style.zIndex = topZ; }); }); })(); </script>
(function() {
const folders = document.querySelectorAll('#slotina-folders-1 .sf-folder');
let topZ = 100;
folders.forEach(folder => { folder.addEventListener('click', e => { e.stopPropagation();
folder.classList.add('sf-active');
topZ++; folder.style.zIndex = topZ; }); }); })(); </script>
Коды абсолютно уникальны
Все написано вручную под Taplink. Никаких шаблонов, никаких чужих решений. Каждый код — кастомный, продуманный и не встречается в открытом доступе.
/ 02
Коды сочетаются
между собой
между собой
Часть кодов можно объединять и сочетать — создавать объёмные композиции, накладывать эффекты и собирать уникальный визуал.
/ 03
Анимированная галерея
Наложение баннера
Поисковая строка
Наложение
на блоки выше
на блоки выше
Фишка и уникальность моих кодов - это эффект выхода за границы обычных Taplink-блоков. У многих кодов есть классический вариант кода и вариант с наложением на блок выше. Это позволяет создавать полностью уникальный дизайн. С этими кодами никто не поверит что сайт сделан на Таплинк.
/ 04
Удобный личный кабинет
Внутри тебя ждут обучающие видео, сами коды с комментариями в стилях, текстовые инструкции и примеры применения. Всё структурировано — работать легко и понятно.
/ 05
76 кодов
Видеоуроки
Инструкции
Примеры
Внутри наборы ты получаешь всё, что нужно для работы
Актуальная коллекция премиальных интерактивов: параллаксы, анимации, галереи, маски, кнопки, эффекты перекрытия, уникальные механики и современные визуальные решения.
Каждый код продуман до мелочей, не конфликтует с остальными разделами страницы и снабжён комментариями внутри стилей — чтобы ты мог легко менять размеры, цвета, отступы, скорости и типографику.
Каждый код продуман до мелочей, не конфликтует с остальными разделами страницы и снабжён комментариями внутри стилей — чтобы ты мог легко менять размеры, цвета, отступы, скорости и типографику.
50+ Taplink-кодов
Часто задаваемые вопросы:
Да. Коды сделаны так, чтобы ими мог пользоваться даже человек без опыта.
Внутри всё показано пошагово: куда вставлять код, что менять, как кастомизировать, как избежать ошибок. Видеоуроки максимально упрощают процесс. Так же есть вводный урок для тех, кто ранее никогда не работал с кодами.
Внутри всё показано пошагово: куда вставлять код, что менять, как кастомизировать, как избежать ошибок. Видеоуроки максимально упрощают процесс. Так же есть вводный урок для тех, кто ранее никогда не работал с кодами.
Да. Ты можешь использовать их в любом количестве своих проектов — без ограничений. На одной странице можно также использовать по несколько кодов - мы старались создавать их так, чтобы они не "утяжеляли" страницу при загрузке.
Да. После оплаты доступ к личному кабинету открывается автоматически. Вы получаете письмо на почту с данными для входа в ваш личный кабинет.
Ты сразу можешь смотреть видео, копировать коды и применять их в работе.
Ты сразу можешь смотреть видео, копировать коды и применять их в работе.
Написать мне — и я помогу разобраться. Поддержка бессрочная, и я отвечаю на вопросы по настройке и адаптации кодов.
Да. Разрешено использовать в своих проектах, для проектов ваших клиентов. Запрещается только перепродажа кодов.
Да, в каталоге ты можешь открыть превью при наведении на карточку каждого кода и посмотреть его работу в действии.
Да, я всегда на связи, можете мне писать по любым вопросам, я всегда отвечу и помогу.
Я создавала эти коды, потому что сама их искала
* Instagram принадлежит компании Meta, признанной экстремистской организацией и запрещенной в РФ
© ТаплинкПрокачка — 2025.
Все материалы являются объектом авторских прав.
Запрещено копирование и распространение без согласия автора.
Все материалы являются объектом авторских прав.
Запрещено копирование и распространение без согласия автора.
Слотина Мария Александровна
ИНН 246215588634
ИНН 246215588634
