Коллекция полезных сниппетов и утилит: готовые решения для сайтов на Tilda и набор вспомогательных инструментов.
| Сниппет | Описание | Технологии |
|---|---|---|
| text-appear-on-scroll.html | Каскадная анимация появления текста строками при скролле для сайтов на Tilda | GSAP, ScrollTrigger, Splitting.js |
| text-reveal-mask.html | Плавное раскрытие текста маской с эффектом стирания при прокрутке страницы на Tilda | GSAP, ScrollTrigger, SplitType |
| fixed-block-with-mask.html | Фиксированный блок с динамической маской, поднимающейся при скролле, для Tilda | Vanilla JS |
| svg-motion-path-scroll.html | SVG-анимация фигурки по заданному пути при скролле страницы на Tilda | GSAP, MotionPathPlugin, ScrollTrigger |
| liquid-glass-effect.html | Эффект Liquid Glass с размытием фона и отблесками для Zero-блока Tilda | CSS backdrop-filter, SVG filters |
| smooth-scroll-lenis.html | Плавный скролл на всей странице Tilda с поддержкой мобильных устройств | Lenis |
| Сниппет | Описание | Технологии |
|---|---|---|
| youtube-auto-pause.html | Автоматическая пауза остальных YouTube-видео при запуске одного на Tilda | YouTube IFrame API |
| responsive-background-video.html | Адаптивное фоновое видео на весь контейнер Zero-блока Tilda | Plyr, HTML5 Video |
| white-noise-canvas.html | Анимированный белый шум на весь экран через canvas для сайтов на Tilda | HTML5 Canvas |
| Сниппет | Описание | Технологии |
|---|---|---|
| hide-catalog-features.html | Фильтрация и скрытие характеристик товаров по названию в каталоге Tilda | Vanilla JS, RegExp |
| hide-empty-cards.html | Скрытие пустых карточек товаров в каталоге Tilda по ключевому слову | Vanilla JS, Tilda API |
| rename-all-category.html | Замена категории «Все» на своё название в магазине Tilda | CSS |
| dynamic-catalog-data.html | Вспомогательный скелет для работы с данными динамического каталога Tilda | Vanilla JS |
| hide-bom-symbol.html | Скрытие BOM-символов и пустых элементов на карточках товаров Tilda | Vanilla JS, Tilda API |
| Сниппет | Описание | Технологии |
|---|---|---|
| replace-contact-icons.html | Замена иконок контактных кнопок (WhatsApp, Telegram, VK) на Font Awesome для Tilda | Font Awesome 6 |
| customize-bf905a-widget.html | Кастомизация виджета контактов BF905A в Tilda: иконки, цвета, тултипы | Vanilla JS, CSS |
| rename-phone-label.html | Замена текста «Phone» на «Телефон» в мессенджер-блоке Tilda | CSS |
| auto-update-copyright-year.html | Автоматическое обновление года в копирайте на сайте Tilda | Vanilla JS |
| image-carousel-autoplay.html | Карусель изображений с автопереключением и настройкой прозрачности для Tilda | Vanilla JS, CSS3 Transitions |
| success-url-new-tab.html | Открытие Success URL форм Zero Block в новой вкладке на Tilda | Vanilla JS, jQuery |
| Файл | Описание | Технологии |
|---|---|---|
| midjourney-docs-export.py | Экспорт документации Midjourney из Zendesk API в offline-архив с markdown-файлами | Python 3, cloudscraper, markdownify |
| extract-audio-to-mp3.bat | Извлечение аудиодорожки из видеофайла и сохранение в формате MP3 | FFmpeg |
| whatsapp-bookmarklet.js | Букмарклет для быстрой отправки сообщений в WhatsApp из выделенного номера | Vanilla JS |
| audio-transcription-prompt.md | Промпт для структурирования транскрибированного аудио с заголовками | LLM Prompt |
Для вставки сниппета в Tilda:
- Откройте нужный
.htmlфайл и скопируйте его содержимое - В редакторе Tilda добавьте блок T123 (HTML-код) или вставьте код в Custom Code нужного Zero-блока
- Опубликуйте страницу
Некоторые сниппеты требуют подключения внешних библиотек (GSAP, Lenis и др.) — подробности указаны в комментариях внутри каждого файла.