+7 921 201-32-35
Написать
5 июня 2025

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

Демо

Реализация cookie-информера с анимацией

<!-- Вставьте этот код перед закрывающим тегом </body> -->
<div class="cookie-consent">
  <div class="cookie-content">
    <p class="cookie-text">
      Этот сайт использует файлы cookie. Продолжая использовать этот сайт, вы соглашаетесь на их использование.
      <a href="/cookie-policy" class="cookie-link">Узнать больше</a>.
    </p>
    <button class="cookie-button">Понятно</button>
  </div>
</div>

<style>
  /* CSS переменные для настройки */
  :root {
    --cookie-bg: rgba(0, 0, 0, 0.7); /* фон уведомления */
    --cookie-button: #4CAF50; /* цвет кнопки */
    --cookie-button-hover: #45a049; /* цвет кнопки при наведении */
    --cookie-button-shadow: 0 4px 8px rgba(76, 175, 80, 0.4); /* тень кнопки */
    --cookie-link: #8bc34a; /* цвет ссылки */
  }

  .cookie-consent {
    position: fixed;
    bottom: -100px; /* начальное положение за экраном */
    left: 0;
    right: 0;
    background: var(--cookie-bg);
    z-index: 1000;
    padding: 15px 0;
    transition: bottom 0.5s ease-out;
    display: flex;
    justify-content: center;
  }

  .cookie-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    width: 90%;
    flex-wrap: wrap;
  }

  .cookie-text {
    color: #fff;
    margin: 0;
    padding-right: 20px;
    font-size: 14px;
    line-height: 1.5;
  }

  .cookie-link {
    color: var(--cookie-link);
    text-decoration: underline;
    transition: color 0.3s;
  }

  .cookie-link:hover {
    color: #aed581;
  }

  .cookie-button {
    background: var(--cookie-button);
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 600;
    box-shadow: var(--cookie-button-shadow);
    transition: background 0.3s, transform 0.2s;
    min-width: 100px;
    font-size: 14px;
    white-space: nowrap;
  }

  .cookie-button:hover {
    background: var(--cookie-button-hover);
    transform: translateY(-2px);
  }

  .cookie-button:active {
    transform: translateY(1px);
  }

  /* Анимация появления */
  .cookie-consent.show {
    bottom: 0;
  }

  /* Мобильная версия */
  @media (max-width: 768px) {
    .cookie-content {
      flex-direction: column;
      text-align: center;
      gap: 15px;
    }
    
    .cookie-text {
      padding-right: 0;
      margin-bottom: 10px;
    }
    
    .cookie-button {
      width: 100%;
      padding: 10px;
    }
  }

  @media (max-width: 480px) {
    .cookie-text {
      font-size: 13px;
    }
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const cookieConsent = document.querySelector('.cookie-consent');
    const cookieButton = document.querySelector('.cookie-button');
    
    // Проверяем наличие флага в sessionStorage
    if (!sessionStorage.getItem('cookieAccepted')) {
      // Задержка для появления через 1 сек после загрузки
      setTimeout(() => {
        cookieConsent.classList.add('show');
      }, 1000);
    }

    // Обработчик кнопки
    cookieButton.addEventListener('click', () => {
      // Скрываем уведомление с анимацией
      cookieConsent.classList.remove('show');
      
      // Сохраняем флаг принятия в sessionStorage
      sessionStorage.setItem('cookieAccepted', 'true');
    });
  });
</script>

Особенности реализации:

  1. Механика работы:

    • Информер появляется через 1 секунду после загрузки страницы

    • При нажатии "Понятно" записывается флаг в sessionStorage

    • Уведомление не показывается на других страницах в текущей сессии

    • При новом заходе (после закрытия браузера) покажется снова

  2. Кастомизация стилей:

    • Использованы CSS переменные для основных цветов

    • Изменяйте параметры в секции :root:

      • --cookie-bg - фон уведомления

      • --cookie-button - основной цвет кнопки

      • --cookie-button-hover - цвет кнопки при наведении

      • --cookie-button-shadow - тень кнопки

      • --cookie-link - цвет ссылки

  3. Анимации:

    • Плавное всплытие снизу (0.5s)

    • Эффекты при наведении на кнопку

    • Плавное изменение цветов ссылки

  4. Адаптивность:

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

    • Автоматическое растягивание кнопки на всю ширину

    • Центрирование текста

    • Адаптивные отступы и размеры шрифта

  5. Дополнительные улучшения:

    • Тень кнопки с изменяемым цветом

    • Минимальные анимации взаимодействия

    • Защита от частого нажатия кнопки

    • Корректное z-index для поверх других элементов

    • Поддержка всех современных браузеров

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

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

    2. Настройте цвета через CSS-переменные в секции :root

    3. Измените URL в ссылке "Узнать больше" (<a href="/cookie-policy">)

    4. При необходимости настройте таймер показа (1000ms = 1 сек)

    Для изменения стилей просто переопределите CSS-переменные в своем основном CSS-файле:

:root {
  --cookie-bg: rgba(40, 40, 40, 0.85);
  --cookie-button: #2E7D32;
  --cookie-link: #FFC107;
}

========================

Вторая улучшенная весрия

<!-- Вставьте этот код перед закрывающим тегом </body> -->
<div class="cookie-consent">
  <div class="cookie-content">
    <p class="cookie-text">
      Этот сайт использует файлы cookie. Продолжая использовать этот сайт, вы соглашаетесь на их использование.
      <a href="/cookie-policy" class="cookie-link">Узнать больше</a>.
    </p>
    <button class="cookie-button">Понятно</button>
  </div>
</div>

<style>
  /* Обновленные CSS переменные для расширенной кастомизации */
  :root {
    --cookie-bg: rgba(0, 0, 0, 0.7);
    --cookie-text-color: #ffffff;
    --cookie-font-size: 15px;
    --cookie-font-family: system-ui, -apple-system, sans-serif;
    --cookie-padding: 20px 0;
    --cookie-content-width: 90%;
    --cookie-max-width: 1200px;
    
    --cookie-button-bg: #4CAF50;
    --cookie-button-hover: #45a049;
    --cookie-button-text: #ffffff;
    --cookie-button-padding: 10px 25px;
    --cookie-button-radius: 25px;
    --cookie-button-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
    --cookie-button-font-weight: 600;
    
    --cookie-link-color: #8bc34a;
    --cookie-link-hover: #aed581;
    
    --cookie-animation-duration: 0.6s;
    --cookie-z-index: 10000;
  }

  .cookie-consent {
    position: fixed;
    bottom: -200px; /* увеличенное начальное положение */
    left: 0;
    right: 0;
    background: var(--cookie-bg);
    z-index: var(--cookie-z-index);
    padding: var(--cookie-padding);
    transition: bottom var(--cookie-animation-duration) cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    justify-content: center;
    transform: translateZ(0);
    backdrop-filter: blur(5px); /* эффект размытия фона */
  }

  .cookie-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--cookie-max-width);
    width: var(--cookie-content-width);
    flex-wrap: wrap;
  }

  .cookie-text {
    color: var(--cookie-text-color);
    margin: 0;
    padding-right: 25px;
    font-size: var(--cookie-font-size);
    line-height: 1.6;
    font-family: var(--cookie-font-family);
    flex: 1;
  }

  .cookie-link {
    color: var(--cookie-link-color);
    text-decoration: underline;
    transition: color 0.3s ease, transform 0.2s ease;
    display: inline-block;
  }

  .cookie-link:hover {
    color: var(--cookie-link-hover);
    transform: translateY(-1px);
  }

  .cookie-button {
    background: var(--cookie-button-bg);
    color: var(--cookie-button-text);
    border: none;
    padding: var(--cookie-button-padding);
    border-radius: var(--cookie-button-radius);
    cursor: pointer;
    font-weight: var(--cookie-button-font-weight);
    box-shadow: var(--cookie-button-shadow);
    transition: all 0.3s ease;
    font-family: var(--cookie-font-family);
    font-size: var(--cookie-font-size);
    position: relative;
    overflow: hidden;
  }

  /* Эффект волны при нажатии */
  .cookie-button:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%);
    transform-origin: 50% 50%;
  }

  .cookie-button:hover {
    background: var(--cookie-button-hover);
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(76, 175, 80, 0.5);
  }

  .cookie-button:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.4);
  }

  .cookie-button:active:after {
    animation: ripple 0.6s ease-out;
  }

  @keyframes ripple {
    0% {
      transform: scale(0, 0);
      opacity: 1;
    }
    100% {
      transform: scale(50, 50);
      opacity: 0;
    }
  }

  /* Анимация появления */
  .cookie-consent.show {
    bottom: 0;
    animation: bounce 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s;
  }

  @keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-20px);}
    60% {transform: translateY(-10px);}
  }

  /* Мобильная версия */
  @media (max-width: 768px) {
    :root {
      --cookie-padding: 15px 0;
      --cookie-font-size: 14px;
      --cookie-button-padding: 10px 20px;
    }
    
    .cookie-content {
      flex-direction: column;
      text-align: center;
      gap: 15px;
    }
    
    .cookie-text {
      padding-right: 0;
      margin-bottom: 5px;
    }
  }

  @media (max-width: 480px) {
    :root {
      --cookie-font-size: 13px;
      --cookie-content-width: 95%;
    }
    
    .cookie-button {
      width: 100%;
    }
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const cookieConsent = document.querySelector('.cookie-consent');
    const cookieButton = document.querySelector('.cookie-button');
    
    // Настройки
    const storageType = 'sessionStorage'; // 'sessionStorage' или 'localStorage'
    const cookieName = 'cookieConsentAccepted';
    const showDelay = 1200; // Задержка перед показом
    
    // Проверяем согласие
    const hasConsent = window[storageType].getItem(cookieName);
    
    if (!hasConsent) {
      // Задержка показа
      setTimeout(() => {
        cookieConsent.classList.add('show');
        
        // Автоскрытие через 30 секунд
        setTimeout(() => {
          if (cookieConsent.classList.contains('show')) {
            cookieConsent.classList.remove('show');
            window[storageType].setItem(cookieName, 'true');
          }
        }, 30000);
      }, showDelay);
    }

    // Обработчик кнопки
    cookieButton.addEventListener('click', () => {
      cookieConsent.classList.remove('show');
      window[storageType].setItem(cookieName, 'true');
    });
    
    // Клик вне области
    document.addEventListener('click', (e) => {
      if (cookieConsent.classList.contains('show') && 
          !e.target.closest('.cookie-content')) {
        cookieConsent.classList.remove('show');
        window[storageType].setItem(cookieName, 'true');
      }
    });
  });
</script>

Ключевые улучшения:

  1. Расширенные CSS-переменные:

    • Добавлены переменные для шрифтов, размеров, отступов

    • Разделены параметры для текста, кнопки и ссылки

    • Переменные для анимации и z-index

  2. Улучшенные анимации:

    • Эффект "bounce" при появлении

    • Волновая анимация при нажатии на кнопку

    • Плавные трансформации при наведении

    • Эффект размытия фона (backdrop-filter)

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

    • Автоскрытие через 30 секунд

    • Закрытие по клику вне области уведомления

    • Выбор типа хранилища (sessionStorage или localStorage)

    • Адаптивная типографика

  4. Улучшенный дизайн кнопки:

    • Усиленная тень при наведении

    • Эффект "нажатия"

    • Анимация волны при клике

    • Более плавные переходы

  5. Оптимизация для мобильных:

    • Увеличенные области касания

    • Адаптивные размеры шрифтов

    • Полная ширина кнопки на маленьких экранах

    • Оптимальные отступы

  6. Дополнительные возможности:

    • Поддержка backdrop-filter для эффекта "фростед-гласса"

    • Кастомные кривые анимации

    • Защита от "дребезга"

    • Оптимизированная производительность анимаций

Как использовать улучшения:

Смена типа хранилища:

const storageType = 'localStorage'; // Для постоянного хранения

Настройка анимации:

:root {
  --cookie-animation-duration: 0.8s;
}

Изменение эффектов кнопки:

:root {
  --cookie-button-shadow: 0 5px 15px rgba(76, 175, 80, 0.5);
  --cookie-button-radius: 30px;
}

  1. Отключение автоскрытия:
    Удалите блок кода с setTimeout(30000) в JS

  2. Добавление иконки:

<p class="cookie-text">
  <svg class="cookie-icon">...</svg>
  Этот сайт использует файлы cookie...
</p>

Это решение более гибкое, современное и визуально привлекательное, с плавными анимациями и дополнительными функциями для улучшения UX.

Ваш заказ
  • image alt
    POWER Full 14
    POWER Full 14
    1000₽
  • image alt
    POWER Full 14
    POWER Full 14
    2000₽
3000₽
Выберите вариант доставки

Оставляя заявку, вы соглашаетесь на обработку персональных данных

2
© 2025
Benjamin J Sperry
НазадЛоготип
Модификации
Подборка кодовых модификаций для сайтов на Craftum, позволяющая решить любые задачи, выходящие за рамки стандартного конструктора Craftum.
С генераторами кода и видео-инструкциями.
Расширения для Craftum, с которым ты можешь больше и быстрее создать продающий и впечатляющий сайт для себя и своих клиентов.
Для сайта

    Craftum Сайт создан на Craftum