главная

Теги:


Организуем тур по сайту

В данном уроке мы опишем, как использовать скрипт для организации тура по вашему сайту. Такая функция будет очень полезна, если вы хотите объяснить посетителю, как использовать ваш проект. Интерактивный тур поможет сделать яркую и запоминающуюся презентацию, особенно, если на сайте есть какие-нибудь особенные функции, на которые стоит обратить внимание.

Facebook использует подобную функцию для описания новых особенностей интерфейса.

Идея заключается в том, чтобы добавить определенный класс к элементам, которые будут описываться в подсказках, выводящихся в точках остановки тура. Будут использоваться небольшие блоки, в которых выводится описание соответствующего элемента, а навигация по туру позволит переключаться между точками остановки и даже перезапускать тур.

Также в скрипте имеется возможность использования функции автопроигрывания, которая автоматически без участия пользователя проведет тур по всем точкам. Код скрипта хорошо закомментирован и достаточно простой.

Чтобы использовать скрипт, нужно просто добавить определенный класс к элементам, которые будут описываться в подсказке. В нашем примере используются классы "tour_1", "tour_2" и так далее:

Создаем тур

Где-то далеко летят поезда, самолеты сбиваются в гурты ...

Шаг тура конфигурируется с помощью объекта JSON. Устанавливаются следующие параметры:

  •   name: имя класса, который присваивается элементу, для которого будет выводить подсказка
  •   bgcolor: цвет фона подсказки
  •   color: цвет текста подсказки
  •   text: текст подсказки
  •   time: если включено автопроигрывание тура, определяется время задержки на шаге в ms
  •   position: позиционирование блока подсказки


Таким образом, первый шаг тура будет иметь вид:

var config = [
	{
		"name" 		: "tour_1",
		"bgcolor"	: "black",
		"color"		: "white",
		"position"	: "TL",
		"text"		: "Текст подсказки",
		"time" 		: 5000
	},...
]

Для позиционирования подсказки используются следующие переменные:

  •   TL: сверху слева
  •   TR: сверху справа
  •   BL: снизу слева
  •   BR: снизу справа
  •   LT: слева сверху
  •   LB: слева снизу
  •   RT: справа сверху
  •   RB: справа снизу
  •   T: сверху
  •   R: справа
  •   B: снизу
  •   L: слева


Последние четыре опции будут выводить подсказку по центру элемента.

Можно адаптировать стили подсказок и навигационных кнопок в файле jquerytour.css.

С помощью такого скрипта можно организовать автоматическую презентацию продукта на одностраничном сайте.


Источник урока: tympanus.net/codrops/2010/12/21/website-tour/

Урок Создан:2011-02-08 Просмотров:2592

Добавить комментарий:


Copyright© 2009 Hosted by Zhost