Написать Javascript скрипт который будет выполнять следующие действия:
брать файлы из папки с фотографиями вида 1.jpg, 2 .jpg, 3.jpg.
- Считывать количество файлов в папке.
- Плавно менять фотографии в блоке CANVAS под управлением пользователя, как мышкой и клавиатурой, так и нарисованными кнопками на странице
На странице должна
показываться только одна фотография.
При нажатии и удерживании
кнопки «вправо», фотографии меняются
одна за одной в порядке увеличения (1 на
2, 2 на 3, 3, на 4 и так до конца), если последняя
фотография, то начинать крутить сначала.
При нажатии и удерживании кнопки
влево, делать тоже самое только наоборот,
в сторону уменьшения.
Тоже самое должно
происходить, если нажать на фотографию кнопкой мыши
и тянуть вправо или влево.
Фотографии должны
меняться с периодичностью в несколько
миллисекунд, для достижения плавности
смены кадров.
Добавить возможность
на каждом кадре добавлять активную зону
любой формы, при нажатии на которую
вызывается окно с контентом.
Контент
должен браться с заранее заготовленных
HTML страниц.
Добавить возможность
зумирования фотографий, при этом активные
зоны должны пропорционально увеличиваться
с зумом.
Активные зоны должны задаваться координатами точек. А также простые формы типа: круг или квадрат.
Пример:
360 кадров маленькой
копии автомобиля, каждый кадр с разницей
в 1 градус от предыдущего.
Активной зоной
обозначить дверь водителя. На каждом
кадре где видна эта дверь, дверь должна
быть кликабельной.
Данная модель позволяет
крутить автомобиль только по горизонтали.
Добавить возможность
крутить автомобиль еще и по вертикали (посмотреть
на крышу автомобиля).
Как это реализовать?
Нужно 360 кадров считываться на одной высот и по 360 кадров
на каждой последующей высоте.
Название
фотографий вида:
(градус по вертикали)_(градус
по горизонтали).jpg
| 1_1.jpg | 1_2.jpg | - - - | 1.360.jpg |
| 2_1.jpg | 2_2.jpg | - - - | 2_360.jpg |
| - - - | - - - | - - - | - - - |
| 50_1.jpg | 50_2.jpg | --- | 50_360.jpg |
Для плавности прокрутки автомобиля достаточно 120 кадров по горизонтали и 20 смещений по вертикали.
Требования:
- Html5
- Корректная работа на всех популярных платформах (windows, mac, ios, android, linux) и популярных браузерах, включая IE8.
- В настройках скрипта возможность указывать путь к папке, размер блока с фотографией, координаты из которых состоит активная зона для каждого кадра.
- Количество кадров должно считываться для каждой высоты.
Вот пример реализации
из программы object2VR
Комментариев нет:
Отправить комментарий