Анимация курсора мыши в Tilda Publishing. ТОП 3
Введение
В современном веб-дизайне анимация является важной частью пользовательского опыта. Анимация курсора мыши в Tilda — это один из способов привлечения внимания пользователя и сделать сайт более интерактивным. Однако, многие дизайнеры и разработчики сталкиваются с проблемой – как реализовать анимацию курсора мыши на своем сайте?
В данной статье мы рассмотрим три варианта анимации курсора мыши в Tilda – одной из самых популярных платформ для создания сайтов. Мы расскажем, как создать анимацию с помощью встроенных инструментов Tilda, а также как использовать CSS и JavaScript для создания более сложных эффектов.
В каждом варианте мы приведем пошаговую инструкцию, которая поможет вам реализовать анимацию курсора мыши на вашем сайте. Независимо от того, создаете ли вы сайт для бизнеса, персонального бренда или блога, анимация курсора мыши может сделать ваш сайт более привлекательным и интерактивным.
Анимация курсора мыши в Tilda. Хвост из изображений
Первая на очереди анимация курсора мыши в виде хвоста из сменяющих друг друга изображений. Это необычное дизайнерское решение придаст вашему сайту на Тильда индивидуальности и заставит ваших посетителей задержаться на вашем сайте на долго! Вот пошаговая инструкция по созданию такой анимации:
- Создайте zero block с любым контентом.
- При желании измените высоту зеро блока.
- Нажмите на кнопку «+» и выберите «Add HTML».
- Нажмите правой кнопкой мыши на HTML элемент и выберите «Add css class name».
- В соответствующем поле пропишите класс «photo-cursor».
- Расположите html элемент там, где, по вашей задумке, курсор будет анимироваться. Либо растяните на всю ширину блока.
- Нажмите на кнопку «+» и выберите «Add Image».
- Загрузите таким образом изображения, из которых будет состоять ваша анимация.
- Перенесите все загруженные изображения за пределы зеро блока.
- Откройте html элемент и скопируйте в него следующий код:
<div class="content">
<img class="content__img" src="ссылка"/>
<img class="content__img" src=" ссылка "/>
<img class="content__img" src=" ссылка "/>
<img class="content__img" src=" ссылка "/>
</div>- Нажмите правой кнопкой мыши на первое изображение и выберите пункт «Copy image url».
- Вернитесь в html элемент и вставьте скопированную ссылку в атрибут «src» вместо первого слова «ссылка».
- Таким же образом скопируйте и вставьте ссылки на остальные изображения.
- Если в вашей анимации изображений больше четырех, то просто добавьте в html элемент строку ниже столько раз, сколько вам потребуется:
<img class="content__img" src=" ссылка "/>- Сохраните изменения и выйдите из зеро блока.
- Добавьте блок «Т123».
- Скопируйте в него следующий код:
<style>
.content__img {
max-width: var(--img-maxwidth);
position: absolute;
top: 0;
left: 0;
opacity: 0;
will-change: transform;
filter: var(--filter-img);
}
.content__img--full {
width: 100%;
height: 100%;
background-size: cover;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.11.4/dist/gsap.min.js"></script>
<script>
{
const body = document.body;
const MathUtils = {
lerp: (a, b, n) => (1 - n) * a + n * b,
distance: (x1,y1,x2,y2) => Math.hypot(x2-x1, y2-y1)
}
const getMousePos = (ev) => {
let posx = 0;
let posy = 0;
if (!ev) ev = window.event;
if (ev.pageX - $(".photo-cursor").offset().left || ev.pageY - $(".photo-cursor").offset().top) {
posx = ev.pageX - $(".photo-cursor").offset().left;
posy = ev.pageY - $(".photo-cursor").offset().top;
}
else if (ev.clientX || ev.clientY) {
posx = ev.clientX + body.scrollLeft + docEl.scrollLeft;
posy = ev.clientY + body.scrollTop + docEl.scrollTop;
}
return {x: posx, y: posy};
}
let mousePos = lastMousePos = cacheMousePos = {x: 0, y: 0};
document.querySelector(".photo-cursor").addEventListener("mousemove", ev => mousePos = getMousePos(ev));
const getMouseDistance = () => MathUtils.distance(mousePos.x,mousePos.y,lastMousePos.x,lastMousePos.y);
class Image {
constructor(el) {
this.DOM = {el: el};
this.defaultStyle = {
scale: 1,
x: 0,
y: 0,
opacity: 0
};
this.getRect();
this.initEvents();
}
initEvents() {
window.addEventListener("resize", () => this.resize());
}
resize() {
gsap.set(this.DOM.el, this.defaultStyle);
this.getRect();
}
getRect() {
this.rect = this.DOM.el.getBoundingClientRect();
}
isActive() {
return gsap.isTweening(this.DOM.el) || this.DOM.el.style.opacity != 0;
}
}
class ImageTrail {
constructor() {
this.DOM = {content: document.querySelector(".content")};
this.images = [];
[...this.DOM.content.querySelectorAll("img")].forEach(img => this.images.push(new Image(img)));
this.imagesTotal = this.images.length;
this.imgPosition = 0;
this.zIndexVal = 1;
this.threshold = 100;
requestAnimationFrame(() => this.render());
}
render() {
let distance = getMouseDistance();
cacheMousePos.x = MathUtils.lerp(cacheMousePos.x || mousePos.x, mousePos.x, 0.1);
cacheMousePos.y = MathUtils.lerp(cacheMousePos.y || mousePos.y, mousePos.y, 0.1);
if ( distance > this.threshold ) {
this.showNextImage();
++this.zIndexVal;
this.imgPosition = this.imgPosition < this.imagesTotal-1 ? this.imgPosition+1 : 0;
lastMousePos = mousePos;
}
let isIdle = true;
for (let img of this.images) {
if ( img.isActive() ) {
isIdle = false;
break;
}
}
if ( isIdle && this.zIndexVal !== 1 ) {
this.zIndexVal = 1;
}
requestAnimationFrame(() => this.render());
}
showNextImage() {
const img = this.images[this.imgPosition];
gsap.killTweensOf(img.DOM.el);
new TimelineMax()
.set(img.DOM.el, {
startAt: {opacity: 0, scale: 1},
opacity: 1,
scale: 1,
zIndex: this.zIndexVal,
x: cacheMousePos.x - img.rect.width/2,
y: cacheMousePos.y - img.rect.height/2
}, 0)
.to(img.DOM.el, 0.9, {
ease: Expo.easeOut,
x: mousePos.x - img.rect.width/2,
y: mousePos.y - img.rect.height/2
}, 0)
.to(img.DOM.el, 1, {
ease: Power1.easeOut,
opacity: 0
}, 0.4)
.to(img.DOM.el, 1, {
ease: Quint.easeOut,
scale: 0.2
}, 0.4);
}
}
new ImageTrail();
}
</script>- Сохраните изменения и опубликуйте страницу.
Анимация курсора мыши в Tilda. Хвост из частиц
Эта анимация реализуется намного проще предыдущей. Она будет работать на всех блоках, в которых вы не задали фоновый цвет.
Следуйте нашей инструкции:
- Добавьте любой блок и удалите из него фоновую заливку. Блок должен быть прозрачным.
- Учтите, что после публикации прозрачный блок станет черным. Поэтому измените цвет текста в этом блоке с черного на любой другой.
- Добавьте блок «Т123» и скопируйте в него следующий код:
Код доступен только тем, кто зарегистрировался и оплатил подписку
Подписка стоит 400 руб./мес. или 1500 руб. в год
Покупая подписку, ты получаешь:
– доступ ко всем уникальным модификациям
– отключение всей рекламы на сайте
– неограниченный размер загружаемых файлов в LF Cloud
- Сохраните изменения, опубликуйте страницу и насладитесь результатом!
Анимация курсора мыши в Tilda. Хвост из неона
Эта анимация работает точно по такому же принципу, что и предыдущая. Повторите все шаги из предыдущей анимации, изменив при этом только код. А именно:
- Добавьте любой блок и удалите из него фоновую заливку. Блок должен быть прозрачным.
- Учтите, что после публикации прозрачный блок станет черным. Поэтому измените цвет текста в этом блоке с черного на любой другой.
- Добавьте блок «Т123» и скопируйте в него следующий код:
Код доступен только тем, кто зарегистрировался и оплатил подписку
Подписка стоит 400 руб./мес. или 1500 руб. в год
Покупая подписку, ты получаешь:
– доступ ко всем уникальным модификациям
– отключение всей рекламы на сайте
– неограниченный размер загружаемых файлов в LF Cloud
- Сохраните изменения, опубликуйте страницу и насладитесь результатом!
Заключение
В заключение можно сказать, что анимация курсора мыши — это простой и эффективный способ усовершенствовать визуальную составляющую вашего сайта и сделать его более интерактивным и привлекательным для пользователей. Мы рассмотрели три варианта реализации анимации курсора мыши в Tilda – с помощью встроенных инструментов, CSS и JavaScript. Каждый из этих вариантов имеет свои преимущества и может быть использован в зависимости от конкретных потребностей проекта.
Надеемся, что наша пошаговая инструкция поможет вам создать красивую и эффектную анимацию курсора мыши на вашем сайте. И не забывайте, что анимация должна быть умеренной и не отвлекать пользователя от основной цели сайта. Используйте анимацию курсора мыши с умом и получайте от нее максимальную выгоду для вашего проекта!
Читайте также: Lottie анимация в Tilda
