URL скопирован в буфер обмена!
Как сделать бегущую строку в Zero Block используя блок DV13?
При помощи данной модификации можно перенести блок бегущей строки DV13 в Zero Block и показывать его при наведении на шейп. Появление строки сопровождается легкой анимацией.
Модификация не работает с включенным Autoscale в блоках
Модификация работает только со стандартным блоком
Номер модификации в библиотеке TiCode
Класс блока DV13
Класс шейпа в Zero Block
Цвет фона шейпа
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD076--><style>
.ti-linebg .tn-atom:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transform: scaleY(0);
background: #f96855;
transition: transform .5s;
}
.ti-linebg:hover .tn-atom:before {
transform: scaleY(1);
}
.uc-line {
opacity: 0;
pointer-events: none;
transition: opacity 0.5s;
}
.ti-linebg:hover .tn-atom .uc-line {
opacity: 1;
}
</style>
<script>
$(function(){
$('.uc-line').appendTo($('.t396__artboard .ti-linebg .tn-atom'));
})
</script>
<script> (function TCDupdType() { const TildahtmlBclok = document.currentScript; if (TildahtmlBclok) { const recordElement = TildahtmlBclok.closest('.r[data-record-type]'); if (recordElement) { recordElement.setAttribute('data-record-type', Math.random().toString(36).substring(2, 12)); }}})(); </script>
Для нормальной работы модификации необходимо включить библиотеку jQuery.
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
1. Создаем первый Zero Block в котором размещаем прозрачный шейп и присваиваем ему класс ti-linebg
Шейпу указываем 100% ширину по Window container. Высоту указываем в пикселях, например 100px
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
2. Создаем блок DV13 и назначаем ему класс uc-line
В настройках блока ставим прозрачный фон
Чтобы добавить класс блоку, заходим в настройки блока и сверху от id блока будет кнопка "Добавить CSS Class Name"
3. В генераторе кода указываем дополнительные настройки:
Цвет фона шейпа - указываем цвет в который будет закрашиваться шейп при наведении;
4. Копируем готовый код и вставляем в HTML блок Т123.
Примечание: шейп в Zero Block важно разместить поверх остальных элементов в слоях.
Название класса для блока DV13 должно всегда начинаться с uc-. например uc-test, uc-ticode Учитывайте это если хотите изменить название в генераторе
Шейпу указываем 100% ширину по Window container. Высоту указываем в пикселях, например 100px
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
2. Создаем блок DV13 и назначаем ему класс uc-line
В настройках блока ставим прозрачный фон
Чтобы добавить класс блоку, заходим в настройки блока и сверху от id блока будет кнопка "Добавить CSS Class Name"
3. В генераторе кода указываем дополнительные настройки:
Цвет фона шейпа - указываем цвет в который будет закрашиваться шейп при наведении;
4. Копируем готовый код и вставляем в HTML блок Т123.
Примечание: шейп в Zero Block важно разместить поверх остальных элементов в слоях.
Название класса для блока DV13 должно всегда начинаться с uc-. например uc-test, uc-ticode Учитывайте это если хотите изменить название в генераторе
Telegram
Instagram
YouTube
Наши соцсети
