URL скопирован в буфер обмена!
Как сделать подсказку при наведении курсора в Zero Block
С помощью этой модификации можно показать свое изображение при наведении курсора на триггер. Дополнительно можно настроить градус поворота и скорость анимации. Модификация отлично подойдет для всплывающих подсказок или добавления интерактива в зеро блок.
Модификация работает с включенным Autoscale в блоках
Модификация работает только с Zero Block
Номер модификации в библиотеке TiCode
Класс изображений
Класс тригеров
Скорость анимации
Поворот изображения при появлении
Размер изображений
Стандартный курсор при наведении
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD079--><script>
$(function(){
if (window.innerWidth >= 640) {
$('[class*=ti-trigger]').each(function() {
let TCNum = parseInt($(this).attr('class').match(/ti-trigger(\d+)/)[1]);
let TCSrc = $('.ti-pic' + TCNum + ' .t-img').attr('data-original');
$(this).append(`
<div class="direction-pic">
<img src="${TCSrc}" alt="">
</div>
`);
$(this).on('mousemove', function(t) {
$(this).addClass('TiCodeActive');
let s = $(this).find('.direction-pic');
s.css('left', t.clientX - s.width() / 2 + 'px');
s.css('top', t.clientY - s.height() / 2 + 'px');
});
$(this).on('mouseout', function() {
$(this).removeClass('TiCodeActive');
$(this).addClass('TiCodeActive-remove');
setTimeout(() => {
$(this).removeClass('TiCodeActive-remove');
}, 450);
});
});
}
});
</script>
<style>
.tc-mix {
mix-blend-mode: difference;
}
[class*=ti-trigger] {
cursor: pointer;
}
.direction-pic {
transform: scale(0);
opacity: 0;
position: fixed;
pointer-events: none;
}
.direction-pic img {
width: 100px;
height: 100px;
pointer-events: none;
}
[class*=ti-trigger].TiCodeActive .direction-pic {
transform: scale(1);
opacity: 1;
animation: visible-pic 0.3s ease-out;
animation-fill-mode: forwards;
pointer-events: none;
}
[class*=ti-trigger].TiCodeActive-remove .direction-pic {
animation: hidden-pic 0.3s ease-out;
animation-fill-mode: forwards;
pointer-events: none;
}
@keyframes visible-pic {
0% {
transform: scale(0);
opacity: 0;
transform: scale(0) rotate(-30deg);
}
100% {
transform: scale(1) rotate(0deg);
opacity: 1;
}
}
@keyframes hidden-pic {
0% {
transform: scale(1) rotate(0deg);
opacity: 1;
}
100% {
transform: scale(0) rotate(-30deg);
opacity: 0;
}
}
</style>
<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-trigger1
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
2. Создаем в зеро блок изображение(лучше всего разместить за пределами видимой области). Загружаем в него картинку и присваиваем класс ti-pic1
Если вам нужно больше триггеров и подсказок, то достаточно в зеро блоке создавать новые элементы и присваивать им классы ti-trigger2 и ti-pic2 В генераторе дополнительно ничего прописывать не нужно.
3. При необходимости указываем дополнительные настройки в генераторе:
Скорость анимации - указываем скорость анимации;
Поворот изображения - можно указать градус поворота изображения при появлении и удалении;
Размер изображений - указываем размер изображений. Если оставить поле пустым, то будет показывать оригинальный размер изображения(подойдет в случае если вам нужно изображения с разными размерами);
Стандартный курсор при наведении - можно включить или отключить стандартный курсор при наведении на тригер.
4. Копируем готовый код и вставляем в HTML блок Т123. Блок T123 должен быть расположен ниже зеро блока;
Примечание: код работает только на пк так как на мобилках нет курсора. Если поверх триггера есть какой-то элемент который перекрывает триггер, то такому элементу можно назначить pointer-events: none в зеро блоке чтобы элемент был невидимым для курсора.
Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
2. Создаем в зеро блок изображение(лучше всего разместить за пределами видимой области). Загружаем в него картинку и присваиваем класс ti-pic1
Если вам нужно больше триггеров и подсказок, то достаточно в зеро блоке создавать новые элементы и присваивать им классы ti-trigger2 и ti-pic2 В генераторе дополнительно ничего прописывать не нужно.
3. При необходимости указываем дополнительные настройки в генераторе:
Скорость анимации - указываем скорость анимации;
Поворот изображения - можно указать градус поворота изображения при появлении и удалении;
Размер изображений - указываем размер изображений. Если оставить поле пустым, то будет показывать оригинальный размер изображения(подойдет в случае если вам нужно изображения с разными размерами);
Стандартный курсор при наведении - можно включить или отключить стандартный курсор при наведении на тригер.
4. Копируем готовый код и вставляем в HTML блок Т123. Блок T123 должен быть расположен ниже зеро блока;
Примечание: код работает только на пк так как на мобилках нет курсора. Если поверх триггера есть какой-то элемент который перекрывает триггер, то такому элементу можно назначить pointer-events: none в зеро блоке чтобы элемент был невидимым для курсора.
Топ 5 книг для дизайнеров
01
Дизайн привычных вещей
Дон Норман
02
Основы стиля в типографике
Роберт Брингхерст
03
Искусство цвета
Иоханнес Иттен
04
Искусство формы
Иоханнес Иттен
05
Новая типографика
Ян Чихольд
