—»     —»   Intro.js: дает посетителям правильное направление
  Раздел: Фреймворки и Платформы   Нет комментариев  

Intro.js: дает посетителям правильное направление



Вы знаете о том, насколько важно, чтобы веб-сайт был полностью понятным, а навигация – очевидной. Посетители не хотят задумываться о том, как попасть в тот или иной раздел, и если для использования вашего сайта у вас есть специальная инструкция, то ваш сайт обречен на провал. Но! Представьте, что вы так незначительно изменили что-то на сайте, что ваши постоянные посетители даже не заметили этого, но вам нужно, чтобы они увидели эти изменения, потому что они могут быть важны и для них тоже! Как вы думаете, было бы неплохо очень аккуратно намекнуть пользователям о чем-то новом на сайте, чтобы они заинтересовались и смогли узнать об этом? Указать им правильное направление? Intro.js – это фреймворк, который позволяет реализовать это. Он направляет ваших пользователей к чему-то новому, что появилось на вашем сайте.

Intro.js: дает посетителям правильное направление

Вы знаете эту систему гидов. Очень часто крупные ресурсы вроде Facebook используют их, чтобы указать на новшества и нововведения в интерфейс сервиса. Если вы вносите какие-либо незначительные изменения на сайт, но вам хочется рассказать об этом пользователям – не нужно создавать отдельную новость, можно просто воспользоваться подсказками.

Гиды на Intro.js

Intro.js предлагает вам фреймворк, который позволяет реализовать небольшие гиды по нововведениям в виде подсказок на сайте. Все что вам нужно сделать для начала работы, это встроить javascript-код и сопутствующие каскадные таблицы стилей в ваш проект. Затем вам нужно обозначить HTML-элемент, который вы хотите включить в гид, при помощи следующих атрибутов данных:

<div data-intro="This is essential information" data-step="2"></div>

Атрибут data-intro определяет фрагмент кода, который будет отображен внутри подсказки. data-step определяет, на каком этапе гида будет отображена подсказка. Ссылки на переход к следующему или предыдущему этапу добавляются автоматически. Таким образом, пользователь имеет возможность быстро прощелкать весь гид.

Как только гид будет запущен, весь сайт будет затемнен, и нормальными останутся только те HTML-элементы, о которых рассказывается в этапе гида.

Атрибут data-position используется для расположения подсказок рядом с HTML-элементом.

Intro.js: дает посетителям правильное направление

После того, как вы определите все необходимые этапы, вы можете запустить гид при помощи следующего запроса:

introJs().start();

IntroJs() может быть запущен при помощи кнопки, либо, что более удобно (как, например, это происходит в Facebook), при полной загрузке страницы.

Стандартный шаблон подсказок довольно опрятен и вряд ли будет сильно выделяться в рамках какого-либо дизайна. Если вам захочется отредактировать внешний вид подсказок, вы можете сделать это. Просто измените CSS-код.

В завершение

Intro.js предлагает невероятно простой и быстрый способ добавить коротенькие гиды по нововведениям на сайте. Если вам нужно будет быстро реализовать подобный интерфейс, не стесняйтесь воспользоваться Intro.js. Если вам нужно что-то более серьезное или строгое, вы всегда можете изменить CSS-код по вашим требованиям. Intro.js работает со всеми современными версиями Firefox, Chrome и Internet Explorer. Так как здесь используется HTML5 и CSS3, вы вероятно уже догадались, что вряд ли стоит ожидать поддержки в старых версиях браузеров.

Ссылки

* Intro.js: javascript-фреймворк для знакомства пользователей с вашим сайтом

Постовой: Kino-Max.com - рай для киноманов! Фильмы онлайн - в хорошем качестве HD 720p, на нашем портале в любое время - это гораздо удобнее и проще!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: javascript, интро
Опубликовал Design FactoRy   Прочитано (раз): 5269   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930