Что это такое?
Intro.js — это лёгкая библиотека для знакомства пользователей с веб-продуктом: она добавляет пошаговые экскурсии-туры, которые показывают посетителям, как пользоваться сайтом или приложением.
Intro.js — это лёгкая библиотека для знакомства пользователей с веб-продуктом: она добавляет пошаговые экскурсии-туры, которые показывают посетителям, как пользоваться сайтом или приложением.Это облачный сервис или библиотека, которую я встраиваю в свои страницы?Библиотека для встраивания: это клиентская JavaScript-библиотека (написана на TypeScript), которая поставляется в виде одного файла intro.js плюс introjs.css — никаких сервисов и аккаунтов не нужно.
Библиотека для встраивания: это клиентская JavaScript-библиотека (написана на TypeScript), которая поставляется в виде одного файла intro.js плюс introjs.css — никаких сервисов и аккаунтов не нужно.Как добавить тур на свой сайт?Установите через npm или yarn, либо возьмите с CDN (jsDelivr/cdnjs); подключите intro.js и introjs.css, пометьте нужные элементы атрибутами data-intro и data-step, затем вызовите introJs().start().
Установите через npm или yarn, либо возьмите с CDN (jsDelivr/cdnjs); подключите intro.js и introjs.css, пометьте нужные элементы атрибутами data-intro и data-step, затем вызовите introJs().start().Нужно ли что-то особенное, чтобы это работало?Нет — библиотека работает в браузере без единой зависимости в рантайме: достаточно скрипта intro.js и его таблицы стилей. Node и npm нужны только для сборки из исходников.
Нет — библиотека работает в браузере без единой зависимости в рантайме: достаточно скрипта intro.js и его таблицы стилей. Node и npm нужны только для сборки из исходников.Можно ли бесплатно использовать это в коммерческом проекте?Двойная лицензия: GNU AGPLv3 для open-source-использования, а для коммерческих приложений, тем или плагинов требуется платная коммерческая лицензия, которую покупают на introjs.com.
Двойная лицензия: GNU AGPLv3 для open-source-использования, а для коммерческих приложений, тем или плагинов требуется платная коммерческая лицензия, которую покупают на introjs.com.Могу ли я ограничить тур только одной частью страницы?Да — передайте селектор в introJs(): introJs('.introduction-farm').start() запустит экскурсию только для элементов с этим классом.
Да — передайте селектор в introJs(): introJs('.introduction-farm').start() запустит экскурсию только для элементов с этим классом.А есть что-то попроще, чем полноценный тур?Да, подсказки (hints): добавьте элементам атрибут data-hint, и на них появятся выноски с подсказками — отдельно от пошагового тура на основе data-intro/data-step.
Да, подсказки (hints): добавьте элементам атрибут data-hint, и на них появятся выноски с подсказками — отдельно от пошагового тура на основе data-intro/data-step.Как насчёт языков с письмом справа налево?Поддерживаются — подключите introjs-rtl.min.css вместо стандартной таблицы стилей, и появится поддержка направления справа налево.
Поддерживаются — подключите introjs-rtl.min.css вместо стандартной таблицы стилей, и появится поддержка направления справа налево.Есть ли готовые обёртки для фронтенд-фреймворков?В README сказано, что у Intro.js много обёрток для разных целей, и отсылает за подробностями к документации, не называя конкретные фреймворки.
В README сказано, что у Intro.js много обёрток для разных целей, и отсылает за подробностями к документации, не называя конкретные фреймворки.What are similar projects?shepherd, highlight.js, tippyjs, fingerprintjs, scrollreveal, floating-ui, hammer.js, jquery
shepherd, highlight.js, tippyjs, fingerprintjs, scrollreveal, floating-ui, hammer.js, jquery