Модуль № В (ClientSide)- Программирование на стороне клиента– River Cruise

[Gaziza]

Здраствуйте

Вы нашли как это делается???


ВВЕДЕНИЕ
Тропический лес Амазонки это влажный, широколистный лес, который охватывает большую часть бассейна Амазонки в Южной Америке. Бассейн охватывает 7,000,000 квадратных километров (2,700,000 квадратных миль), из которых 5,500,000 квадратных километров (2,100,000 квадратных миль) покрыты тропическим лесом. Этот регион включает в себя территорию, принадлежащую девяти разным нациям, вместе с тем большинство территории леса находится в Бразилии.
Река Амазонка пересекает лес посередине. Река Амазонка - это крупнейшая река по сбросу воды в мире. Сброс воды в среднем равняется 209,000 кубическим метрам в секунду, это больше чем следующие по величине семь отдельных рек вместе взятых. Река протекает в Бразилию через Перу именуясь RioSolimões, и в конечном счете, в городе Манаус (столица штата Амазонас), река берет название RioAmazonas (Река Амазонка). Она пересекает страну и достигает Атлантического Океана через Бразилию. Красота природы вокруг реки Амазонки привлекает тысячу туристов каждый год. Круизыявляютсялучшимвариантомисслед ованияэтойобласти.

Amazing River Cruises это крупная круизная компания предлагающая круизы по реке Амазонке. Круиз берет начало в порту города Манаус навстречу отличному приключению с остановками во всех местах, которые сделают это путешествие незабываемым. Например, Встреча Вод, слияние Рио Солимос и Рио Негро, а также место где река Солимос становится рекой Амазонкой.
«Amazing River Cruises» запускает высоко интерактивную страницу для того чтобы показать всю роскошь круизов компании - TheGreatAmazon («Великая Амазонка»). «Великая Амазонка» это четырехдневный круиз который предлагает такие развлечения как классическая музыка на борту корабля на закате, рыбалка на пираний, обнаружение аллигаторов, приключение от первого лица на знаменитой Встрече Вод. Навигация новой страницы должна показывать каждую остановку маршрута круиза, и передать общий тон путешествия пользователю.
Компания уже собрала все основы для страницы, но она до сих пор не интерактивна. Для дальнейшей разработки страницы и для того чтобы удовлетворить ожидания компании, необходимо применить анимацию, навигацию и визуальные эффекты.

ОПИСАНИЕ ПРОЕКТА И ЗАДАЧИ
Ваша задача добавить навигацию, анимацию и интерактивность, обеспечив, доступный для конечного потребителя, захватывающий пользовательский интерфейс. Следовательно, вам необходимо соответствовать коммуникационным потребностям компании. Вы можете свободно внедрять такую анимацию какие посчитаете подходящими для дизайна, но ваше решение должно соответствовать следующим требованиям:
Прокрутка колеса мыши и прокрутка страницы должны управлять навигацией по странице, анимацией и видимостью разделов
Движение круиза по реке
Круиз не пересекает границы (то есть следует по реке)
Каждая остановка круиза показывает соответствующий раздел
Прокрутка вниз перемещает круиз вперед, прокрутка вверх перемещает круиз назад
Объекты анимируются в соответствии с прокруткой страницы
Анимация не выполняется без прокрутки
Разделы
Элементы раздела постепенно отображаются с прокруткой, включая информационное окно
Прокрутка «вниз» означает движение вперед, прокрутка «вверх» - назад.
Для каждой остановки круиза должен быть свой раздел:
1. Отправление из порта города Манаус
Информационное окно
Фото, название, текст
Анимация
Летающие ара (параллакс, большие ара летают быстрее чем более мелкие)
Звук
Cruise_departure.mp3 (проигрывается один раз, когда загружается страница)
2. «Встреча Вод»
Информационное окно
Фото, название, текст
Aнимация
Пересечение вод анимировано
Без звука
3.Классическая музыка на палубе на закате
Информационное окно
Название, текст
Анимация
анимирован смычок скрипки
при выходе из секции(солнечный свет исчезает, солнце скользит вверх)
с. Звук
classic_music.mp3 (играет беспрерывно)
4. Рыбалка на пираний
Информационное окно
Фото, название, текст
b. Анимация
пираньи выпрыгивают из воды в колоннах, но не все одновременно
c. Без звука
5.Обнаружение аллигаторов
a. Информационное окно
Фото, название, текст
b. Анимация
Аллигаторы появляются по одному
c. Звук
Alligators.mp3 (играет непрерывно)
6. Прибытие в порт города Манаус
a. Нет информационного окна
b. Анимация
Полет ара (параллакс, большие ара летают быстрее более мелких ара)
с. Звук
Cruise_arrival.mp3 (играет один раз, когда круиз прибывает в док-станцию)

Карта обзора маршрута отображается в нижнем правом углу
Расположение круиза на обзорной карте должно соответствовать навигации по разделу
Текущая точка выделена на обзорной карте
Выделенная точка должна соответствовать порядку текущего раздела
Нажмите на точку обзорной карты, чтобы перейти к соответствующему разделу
Движение круиза между остановками анимируется, контролируется прокруткой страницы
Звуки секций, которые играют непрерывно, должны постепенно появляться, когда навигация приближается и постепенно утихать, когда навигация удаляется от секции.
Фоновый звук должен воспроизводиться всегда (background.mp3)
В конце звука раздела «Прибытие в порт города Манаус» должно отображаться модальное окно с анимированными строками
Данные из JSON
Дата написана в европейском стиле (ДД / ММ / ГГГГ)
Следующие доступные даты (1 строка на каждую дату)
Процент вместимости забронированных мест на дату, исходя из общей вместимости 250 человек
Страница должна корректно работать в браузере Chrome.