URL скопирован в буфер обмена!

Как добавить анимацию развёртывания на картинку?

Модификация добавляет эффект постепенной загрузки на картинку или шейп Tilda. Дополнительно можно настроить направление и время анимации.

Модификация работает с включенным Autoscale в блоках
Модификация работает только с Zero Block
Номер модификации в библиотеке TiCode

Генератор кода

Класс для картинки
Направление анимации
Время анимации
Отключить анимацию на мобилках
Войдите в аккаунт чтобы получить доступ к генератору кода
Этот генератор кода доступен только тем кто оплатил подписку
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev --> <!--TCD041--><style> .tc-img.show { visibility: visible; animation: reveal 2s forwards; } .tc-img { clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%); visibility: hidden; } @keyframes reveal { 90% { clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%); } 100% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); visibility: visible; } } </style> <script> const ticodeimages = document.querySelectorAll('.tc-img'); function isElementInViewport(element) { const rect = element.getBoundingClientRect(); return ( rect.top <= (window.innerHeight || document.documentElement.clientHeight) && rect.left <= (window.innerWidth || document.documentElement.clientWidth) && rect.bottom >= 0 && rect.right >= 0 ); } function TiCodeScroll() { ticodeimages.forEach(function (ticodeimage) { if (!ticodeimage.classList.contains('show') && isElementInViewport(ticodeimage)) { ticodeimage.classList.add('show'); } }); } window.addEventListener('scroll', TiCodeScroll); window.addEventListener('load', TiCodeScroll); </script>
КОПИРОВАТЬ КОД
1. Создаем шейп или картинку в Zero Block и задаем элементу класс tc-img
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс

2. Указываем дополнительные настройки в генераторе:
Направление анимации - задаем направление развертывания картинки
Время анимации - указываем время анимации

3. Копируем готовый код и вставляем в HTML блок Т123.

Примечание! Модификация плохо работает с блоками МЕ602, ME603, слайдерами, табами и кнопками "показать больше"
Для просмотра анимации обновите страницу
Indonesia
Made on
Tilda