URL скопирован в буфер обмена!
Как сделать эффект светящейся сферы следующей за курсором
При помощи данной модификации можно добавить на фон в Zero Block эффект светящейся сферы, которая будет следить за курсором. Дополнительно можно добавить градиент и включить анимацию для сферы. Скрипт работает только на десктопах.
Модификация не работает или плохо работает с включенным Autoscale в блоках
Модификация работает только с Zero Block
Номер модификации в библиотеке TiCode
Класс контейнера
Первый цвет сферы
Второй цвет сферы
Скорость передвижения
Размер сферы
Анимация сферы
Скорость анимации
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD071--><div class="ti-blob"></div>
<div class="TCDblur"></div>
<script>
const TCDblob = document.querySelector(".ti-blob");
function handlePointerMove(event) {
const { clientX, clientY } = event;
TCDblob.animate({
left: `${clientX}px`,
top: `${clientY}px`
}, { duration: 3000, fill: "forwards" });
}
window.addEventListener("resize", function() {
if (window.innerWidth >= 980) {
TCDblob.classList.remove("hide-ti-blob");
window.addEventListener("pointermove", handlePointerMove);
} else {
TCDblob.classList.add("hide-ti-blob");
window.removeEventListener("pointermove", handlePointerMove);
}
});
window.dispatchEvent(new Event('resize'));
</script>
<style>
.ti-blob {
height: 100%;
aspect-ratio: 1;
position: absolute;
left: 50%;
top: 50%;
translate: -50% -50%;
border-radius: 50%;
background: linear-gradient(to right, #FCED52, #f96855);
animation: rotate 10s infinite;
opacity: 0.8;
}
.TCDblur {
height: 100%;
width: 100%;
position: absolute;
z-index: 2;
backdrop-filter: blur(7vmax);
}
@media screen and (max-width: 979px) {
.ti-blob {
display: none;
}
}
.hide-ti-blob {
display: none !important;
}
</style>
Для нормальной работы модификации необходимо включить библиотеку jQuery.
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
1. Создаем в Zero Block HTML, указываем ему настройку window container вместо grid и задаем высоту 100% ширину 100%.
2. Указываем настройки в генераторе кода:
Класс сферы - указываем уникальный класс или оставляем стандартный. Если нужно две и больше сферы в рамках страницы, то классы должны быть уникальные;
Цвет 1 и Цвет 2 - указываем два цвета чтобы сфера была с градиентом. если нужен сплошной цвет, то указываем одинаковый цвет в двух полях;
Скорость передвижения - указываем скорость с которой сфера будет догонять курсор;
Размер сферы - указываем размер сферы в процентах;
Анимация сферы - если включили, то сфера будет плавно вращаться вокруг своей оси и немного пульсировать. Можно настроить скорость анимации в поле "Скорость анимации".
3. Копируем готовый код и вставляем в HTML контейнер внутри Zero Block.
Примечание! Скрипт не работает на мобилках.
2. Указываем настройки в генераторе кода:
Класс сферы - указываем уникальный класс или оставляем стандартный. Если нужно две и больше сферы в рамках страницы, то классы должны быть уникальные;
Цвет 1 и Цвет 2 - указываем два цвета чтобы сфера была с градиентом. если нужен сплошной цвет, то указываем одинаковый цвет в двух полях;
Скорость передвижения - указываем скорость с которой сфера будет догонять курсор;
Размер сферы - указываем размер сферы в процентах;
Анимация сферы - если включили, то сфера будет плавно вращаться вокруг своей оси и немного пульсировать. Можно настроить скорость анимации в поле "Скорость анимации".
3. Копируем готовый код и вставляем в HTML контейнер внутри Zero Block.
Примечание! Скрипт не работает на мобилках.
glowing sphere
Чтобы посмотреть пример модификации откройте страницу на пк
