Уведомление cookie на сайт скачать код с анимацией

Это решение создает интерактивный и запоминающийся cookie-информер с плавными анимациями и профессиональным внешним видом, который точно привлечет внимание пользователей.

ДЕМО

Ключевые особенности реализации:

1. Lottie-анимация персонажа:

   • Анимация отображается справа от текста

   • Используется популярная библиотека Lottie

   • По умолчанию используется анимация милого монстра (можно заменить)

   • Настройки размера через CSS-переменные

2. Эффект печатающегося текста:

   • Текст появляется посимвольно с кастомной скоростью

   • Мигающий курсор во время печати

   • Поддержка HTML-тегов в тексте (для ссылки)

3. Анимация кнопки:

   • Кнопка плавно появляется после завершения печати текста

   • Эффекты наведения и нажатия

   • Плавное исчезновение всего информера

4. Удобные настройки:

const settings = {
  storageType: 'sessionStorage', // Тип хранилища
  cookieName: 'cookieConsentAccepted', // Ключ для хранения
  showDelay: 1500, // Задержка перед показом (мс)
  text: 'Ваш текст...', // Текст с HTML
  typingSpeed: 30, // Скорость печати (мс/символ)
  lottieJson: 'url.json' // Путь к JSON Lottie
};

1. Как сменить анимацию:

   • Замените URL в настройке lottieJson

   • Найдите подходящую анимацию на LottieFiles

   • Скопируйте URL JSON-файла

2. Адаптивный дизайн:

   • На мобильных устройствах анимация перемещается сверху

   • Автоматическое изменение размеров

   • Центрирование элементов

3. Дополнительные эффекты:

   • Размытие фона (backdrop-filter)

   • Тень с настраиваемыми параметрами

   • Плавные переходы всех элементов

   • Анимация мигающего курсора

Как использовать:

1. Вставьте код перед закрывающим тегом </body>

2. Для смены анимации:

   • Перейдите на LottieFiles

   • Выберите понравившуюся анимацию

   • Нажмите "Download" → "JSON"

   • Загрузите файл на свой сервер

   • Укажите путь в настройках: lottieJson: '/путь/к/анимации.json'

3. Настройте текст сообщения в переменной settings.text

4. Измените цвета через CSS-переменные в секции :root

Пример смены анимации :

lottieJson: 'https://assets6.lottiefiles.com/packages/lf20_7sk0mibx.json'

  

    

      

      Понятно