ENDURANS Library

 

📚 Документация ENDURANS Header Library (v5.4)

ENDURANS Library — это легковесная JavaScript-библиотека для создания анимированных промо-заголовков, праздничных эффектов (снег, гирлянды, фейерверки) и интерактивных слайдеров.

🚀 Быстрый старт

Для подключения библиотеки на сайт выполните 3 шага:

1. Подготовка файлов

Убедитесь, что файлы библиотеки загружены на ваш сервер.

  • JS файл: endurans.js

  • Иконки: Папка с иконками (SVG или PNG) должна находиться по адресу, указанному внутри endurans.js в переменной ICONS_PATH.

    • Пример пути: /api/libraries/endurans/v1/img/icons/

    • Необходимые файлы: telegram.svg, vk.svg, youtube.svg (или другие, которые вы укажете в настройках).

2. Вставка кода

Разместите следующий код перед закрывающим тегом </body> на вашем сайте:

Html
 
<script>
    // 1. КОНФИГУРАЦИЯ
    window.ENDURANS = {
        modules: {
            promoSlider: true,    // Включить слайдер
            globalSnow: false,    // Снег на весь сайт (поверх контента)
            garland: true,        // Гирлянда
            socials: true         // Иконки соцсетей
        },
        settings: {
            sliderPosition: "fixed", // 'fixed' или 'relative'
            heightDesktop: "400px",
            garlandStyle: "multicolor",
            snowStyle: "gentle"
        },
        slider: {
            mainLink: "https://ваш-сайт.ru",
            socials: [
                { type: "telegram", url: "https://t.me/ваш_канал", icon: "telegram.svg" },
                { type: "vk", url: "https://vk.com/ваш_паблик", icon: "vk.svg" }
            ],
            slides: [
                { url: "img/banner1.jpg", effect: "snow", link: "https://site.ru/page1" },
                { url: "img/banner2.jpg", effect: "zoom", link: "https://site.ru/page2" }
            ]
        }
    };

    // 2. ЗАГРУЗЧИК
    (function () {
        var script = document.createElement('script');
        // Укажите актуальный путь к файлу endurans.js на вашем сервере!
        script.src = 'https://endurans.ru/api/libraries/endurans/v1/endurans.js?v=5.4';
        document.head.appendChild(script);
    })();
</script>

⚙️ Полное описание настроек

Все настройки передаются через глобальный объект window.ENDURANS.

1. Блок modules (Включение/Выключение)

Управляет видимостью компонентов. Значения: true или false.

Параметр Описание
promoSlider Главный переключатель слайдера. Если false, слайдер скрыт.
globalSnow Включает снег поверх всего сайта (независимо от слайдера).
garland Включает гирлянду. Если слайдер выключен, гирлянда крепится к верху страницы.
fireworks Разрешает эффект фейерверка на слайдах.
snow Разрешает эффект снега внутри слайдера.
zoom Разрешает эффект приближения (Ken Burns effect).
socials Отображать или скрыть кнопки соцсетей.

2. Блок settings (Внешний вид)

Тонкая настройка размеров и стилей анимации.

Размеры и позиционирование

  • sliderPosition:

    • "fixed" — Слайдер зафиксирован сверху (как «шторка»), сайт прокручивается под ним.

    • "relative" — Слайдер является частью страницы и уезжает вверх при прокрутке.

  • heightDesktop: Высота на ПК (например, "400px").

  • heightMobile: Высота на мобильных устройствах (например, "250px").

  • maxWidth: Максимальная ширина контента (например, "1400px").

Стили эффектов

Вы можете менять визуальный стиль эффектов, меняя значения строк:

Параметр Значения Описание
garlandStyle "multicolor" Разноцветные лампочки (Красный, Желтый, Синий, Зеленый).
  "warm" Теплый ламповый свет (Золотые оттенки).
snowStyle<br>(Внутри слайдера) "gentle" Спокойный, классический снегопад.
  "blizzard" Быстрая метель.
globalSnowStyle<br>(На весь сайт) "gentle" Спокойный снег.
  "realistic" 3D-эффект с глубиной (параллакс).
  "storm" Сильная метель со сносом вбок.
  "pixel" Квадратные снежинки (Ретро/Minecraft стиль).
fireworkStyle "colorful" Разноцветные салюты.
  "gold" Только золотые искры.
zoomStyle "in" Плавное приближение картинки.
  "out" Плавное отдаление картинки.

3. Блок slider (Контент)

mainLink

Ссылка по умолчанию. Если пользователь кликнет на баннер, у которого нет собственной ссылки, он перейдет сюда.

socials (Массив кнопок)

Каждый объект в массиве создает кнопку.

JavaScript
 
{
    type: "telegram",       // Используется для CSS класса (цвет при наведении и т.д.)
    url: "https://...",     // Ссылка
    icon: "telegram.svg"    // Имя файла в папке иконок на сервере
}

slides (Массив слайдов)

JavaScript
 
{
    url: "img/1.jpg",       // Ссылка на картинку
    effect: "snow",         // Эффект этого слайда (snow, fireworks, zoom)
    link: "https://..."     // (Необязательно) Индивидуальная ссылка для этого слайда
}

🛠 Примеры использования

Вариант А: Только Новогодняя гирлянда (Без слайдера)

Подходит, если вы хотите украсить существующий сайт, не добавляя большие баннеры.

JavaScript
 
window.ENDURANS = {
    modules: {
        promoSlider: false, // Выключаем слайдер
        garland: true,      // Оставляем гирлянду
        globalSnow: false
    },
    settings: {
        garlandStyle: "warm" // Теплый свет
    }
    // Остальные настройки можно не писать
};

Вариант Б: Снег на весь экран + Слайдер

Максимально праздничный вариант.

JavaScript
 
window.ENDURANS = {
    modules: {
        promoSlider: true,
        globalSnow: true, // Снег поверх сайта
        garland: true
    },
    settings: {
        sliderPosition: "relative", // Слайдер не перекрывает контент при скролле
        globalSnowStyle: "realistic", // Красивый 3D снег
        snowStyle: "blizzard" // Внутри слайдера метель
    },
    slider: {
        // ... ваши слайды ...
    }
};

❓ Решение проблем

1. Не отображаются иконки соцсетей

  • Проверьте, что файлы telegram.svg, vk.svg физически находятся в папке, которая прописана в переменной ICONS_PATH внутри файла endurans.js.

  • Проверьте консоль браузера (F12) на наличие ошибок 404.

2. Слайдер перекрывает меню сайта

  • Измените sliderPosition на "relative".

  • Или уменьшите heightDesktop в настройках.

3. Изменения в коде не видны

  • Браузер закешировал файл скрипта. Измените параметр версии при подключении: endurans.js?v=5.5 (поменяйте цифру).