novosibpano@yandex.ru  

Примеры и идеи, реализованные в krpano


  • HTML5.

  • Рулетка

    Щелкните для просмотра примера

    Измерение расстояний в пределах прямоугольной плоскости (хотспот). Изначально нужно знать внешние размеры измеряемой плоскости (длина и высота стены и т.д.) Хотспот можно подогнать под плоскости стен, пола и т.д. Этого достаточно для того, что бы измерить растояние от раковины до умывальника, понять войдет шкаф в угол или нет, какой длины нужны гардины и т.д. Точность измерения зависит от расстояния до предметов - чем они ближе, тем точнее измерение.




    Адаптивная сетка

    Реализация идеи распределения при изменении размера элементов или при изменении размеров окна. Можно изменить элементы, присвоить им изображения и назначить действия и мы получим бар миниатюр.

    Щелкните для просмотра примера




    Анимация хотспотов и слоев

    Создайте колебательное движение слоя или или хотспота.

    Щелкните для просмотра примера

    Это код для запуска анимации колебательного движения .

    <action name="wobble" scope="local" args="attribute, min, max, time">
    	set(local.vverh, false);
    	calc(cal,'caller.' + attribute);
    	setinterval(calc('merc_' + caller.name), get(time), 
    			if(vverh,tween(get(cal),get(max),get(time)); set(vverh,false);
    				,
    				tween(get(cal),get(min),get(time)); set(vverh,true);
    			);
    		);

    </action>

    Например, при загрузке слоя запишите onloaded="wobble(scale,0.5,1,1);"

    Масштаб будет изменяться от 0.5 до 1 за 1 секунду.




    Пин-код к двери

    Щелкните для просмотра примера

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




    Нарезка картинки из хотспотов

    Найдите 4 смайлика.

    Щелкните для просмотра примера

    Используя экшн "for" можно создать плоскость из хотспотов в виде нарезанной картинки, задать им какое либо действие на наведение, щелчок и т.д. Я использовал этот код в виртуальном туре-квесте, где под каждым квадратиком пряталось число от 0 до 15 (с использованием генератора случайных чисел). Открытое число являлось процентом скидки на услуги в салоне красоты.




    Пример использования генератора случайных чисел

    Стаканчики.

    Щелкните для просмотра примера

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




    Пазлы

    Это простенькая игра в пазлы, при старте запускается секундомер. Вам нужно расположить куски панорамы на свои места. Если место правильное, картинка "фиксируется". Лучше раскройте на полный экран. Это не просто, но возможно!
    В примере показана возможность позиционирования хотспотов к заданным местам в панораме.

    Щелкните для просмотра примера




    Вращение предметов

    Реализация кода для вращения предметов.

    Щелкните для просмотра примера




    Свадебная панорама

    Использование фотогалереи.

    Щелкните для просмотра примера




    Комментарии.