Кастомные курсоры в Tilda. Как заменить стандартный курсор на свой

Введение

Вы когда-нибудь задумывались, как сделать ваш сайт более выразительным? Ответ прост: кастомные курсоры в Tilda! Эта удивительная функция приносит необычайное волшебство в ваши веб-проекты, делая их неповторимыми. Давайте рассмотрим, почему использование кастомных курсоров на платформе Tilda станет вашим секретным оружием в мире веб-дизайна.

Почему стоит использовать кастомные курсоры в Tilda

Кастомные курсоры в Tilda предоставляют уникальную возможность выделиться среди множества обыденных сайтов. Они не только привлекают внимание, но и создают неповторимую атмосферу на вашей странице. Вместо того, чтобы использовать стандартные курсоры, вы можете придать своему сайту характер и стиль, сочетающиеся с вашим брендом.

Прежде чем погрузиться в мир кастомных курсоров в Tilda, полезно знать несколько важных моментов. Например, выбор подходящей иконки, определение размера и цвета – все эти детали могут сделать ваш курсор узнаваемым и стильным.

Как легко внедрить кастомные курсоры в Tilda

Вопрос, который возникает у многих, – насколько сложно добавить кастомные курсоры в Tilda? Ответ: проще простого! Всего несколько шагов, и ваш сайт станет неотразимым:

1. Скачайте любой курсор, например, на сайте flaticon или разработайте его самостоятельно в любом графическом редакторе
2. На вашем тильда сайте, после всех блоков на странице, создайте html блок «Т123»
3. Нажмите на кнопку «Контент»
4. Скопируйте в «Контент» следующий код:

<script>
document.addEventListener('DOMContentLoaded', function() {
  var customCursor = document.createElement('div');
  
  customCursor.style.width = '32px';
  customCursor.style.height = '32px';
  customCursor.style.backgroundImage = 'url("иконка.png")'; // Ссылка на иконку курсора
  customCursor.style.backgroundSize = 'cover';
  customCursor.style.position = 'fixed'; 
  customCursor.style.pointerEvents = 'none'; 
  customCursor.style.zIndex = '999999'; 
  // Добавляем курсор к body
  document.body.appendChild(customCursor);
  
  document.body.addEventListener('mouseleave', function() {
    customCursor.style.display = 'none';
  });

  document.body.addEventListener('mouseenter', function() {
    customCursor.style.display = 'block';
  });

  document.body.style.cursor = 'none';

  document.addEventListener('mousemove', function(e) {
    if (getComputedStyle(e.target).cursor === 'pointer') {
      customCursor.style.display = 'none'; 
    } else {
      customCursor.style.display = 'block';
      customCursor.style.left = (e.clientX - 16) + 'px';
      customCursor.style.top = (e.clientY - 16) + 'px';
    }
  });

  document.addEventListener('scroll', function() {
    customCursor.style.top = (event.clientY - 16 + window.scrollY) + 'px';
  });
});
</script>

5. Откройте LF Cloud – бесплатный хостинг файлов с прямой ссылкой на скачивание
6. Выберите вашу иконку для курсора и нажмите «Загрузить»
7. Скопируйте появившуюся ссылку на иконку и вернитесь в тильду
8. Снова откройте «Контент» блока «Т123»
9. Вставьте скопированную ссылку в код, в указанное место
10. Сохраните изменения и опубликуйте страницу

После выполнения всех этих действий на курсор на вашем сайте уже не будет прежним!

Заключение

Кастомные курсоры – неотъемлемая часть современного веб-дизайна. Они добавляют индивидуальности и креативности вашему сайту, делая его запоминающимся для посетителей. Смело экспериментируйте, выделяйтесь и покоряйте веб-пространство с кастомными курсорами на платформе Tilda Publishing!

Смотрите обучающие видео уроки по Тильде тут

Читайте также: Пагинация в Tilda