Toasty!
Тот самый парень из правого нижнего угла. Выбери версию и выпусти его на экран.
Готов к выходу из-за края экрана.
import toasty from './toasty.mjs';
toasty();Один модуль. Без jQuery и отдельных загрузок картинок или звука при появлении. Звук включается после клика; если браузер его блокирует, персонаж всё равно появляется.
Добавь Toasty на свой сайт
Подойдёт обычная HTML-страница, PHP-шаблон или проект на JavaScript. Никаких пакетов и сборки: подключи модуль и вызови toasty().
- Скопируй код ниже в HTML своей страницы перед
</body>. - Открой страницу и нажми кнопку «Toasty!». Модуль загрузится с toasty.geekchain.io.
- Скачай
toasty.mjsи положи рядом со страницей на своём хостинге. - Вставь код ниже перед
</body>. Если файл в другой папке — поменяй путь вimport.
Всё уже внутри файла. Ничего устанавливать через npm не нужно.
Пример использует выбранные выше персонажа, размер и звук. Если обработчик клика у тебя уже есть, импортируй модуль в свой JS и вызови функцию из него.
Один вызов. Несколько трюков.
Показывай персонажа после действия пользователя или оставь появление на волю случая.
toasty(); // Оригинал, 180 px, со звуком
toasty('enhanced'); // Улучшенная версия
toasty('random'); // Случайно одна из двух// После импорта, в обработчике клика:
const stopRandom = toasty.random({
character: 'random',
minDelay: 15000, // Не раньше чем через 15 секунд
maxDelay: 45000, // Не позже чем через 45 секунд
});
// Когда захочешь остановить:
// stopRandom();
// toasty.stop(); // Убрать уже появившегося персонажа| Настройка | Что делает |
|---|---|
character | 'original', 'enhanced' или 'random'. По умолчанию — оригинал. |
size | Ширина картинки в пикселях. По умолчанию 180 — исходный размер без увеличения. |
sound | false, чтобы показывать без звука. По умолчанию true. |
volume | Громкость от 0 до 1. По умолчанию 1. |
duration | Время от появления до исчезновения в миллисекундах. По умолчанию 1000. |
Ещё пара деталей
Почему иногда нет звука?
Браузер может запрещать звук до первого клика или тапа. Запускай toasty() или toasty.random() из обработчика клика. Для своего таймера можно заранее вызвать toasty.unlockAudio() при клике. Если звук всё равно заблокирован настройками браузера, анимация продолжит работать.
Можно вызвать из обычного скрипта или onclick?
Да. Внутри <script type="module"> после импорта добавь window.toasty = toasty;. После загрузки модуля функция доступна глобально — например, onclick="toasty('enhanced')".
Как проверить скачанный файл локально?
Запусти в папке со страницей python3 -m http.server 8000 и открой http://localhost:8000. ES-модулям нужен HTTP-сервер: открытие HTML двойным кликом через file:// не подходит.
Что нужно настроить на хостинге?
Файл .mjs должен отдаваться с типом text/javascript или application/javascript. Для подключения с других доменов серверу нужен заголовок Access-Control-Allow-Origin: *. Если изменить настройки нельзя, скачай модуль и подключай со своего домена. При строгой CSP разреши источник модуля и встроенные изображения data:.