Іноді один день, проведений в інших місцях, дає більше,
ніж десять років життя вдома.
Саме час для весняних подорожей!
Вам пропонується розробити презентацію семи найкращих маршрутів
цієї весни за версією European Best Destination.
Демонстрація
В якості вихідних матеріалів надається сторінка
7 маршрутів для весняних подорожей Європою
включно з усіма необхідними
для коректного відображення файлами. Для виконання завдань
дозволяється змінювати, додавати чи видаляти будь-які
дані наданій заготовці.
Частина 1. Презентація
Шляхом редагування файлів js/slider.js, css/slides.css
та css/controls.css розробити фрейворк для презентацій.
Вимоги до фреймворка
- Кожен слайд займає всю ширину
та висоту поточного вікна браузера.
- В
режимі презентації
внизу екрану відображаються
та працюють кнопки контролю: попередній ...
і наступний слайд
.
Спроби перемкнути на наступний слайд, коли він останній,
та попередній, коли він перший, не приводять
до жодних результатів.
- Клавіші зі стрілками вліво та вверх виконують
ті ж дії, що і контрольна кнопка попередній слайд
на екрані; стрілки вправо та вниз —
наступний слайд відповідно.
- Зміни слайдів супроводжуються анімацією.
- Внизу вікна відображається смуга прогресу презентації,
яка слугує індикатором поточного слайду. Смуга анімується
під час зміни слайдів.
- При зміні слайду на панелі адреси змінюється посилання.
Повторне відкриття сторінки з тією ж адресою
або перезавантаження поточної сторінки автоматично відображає
відповідний слайд.
Частина 2. Галерея
Шляхом редагування файлів js/gallery.js та css/gallery.css
додати інтерактивність галереї.
Вимоги до галереї
- Кожні 10 секунд змінюється
активне
зображення галереї.
- Зображення стають активними по черзі та по колу;
тобто слідом за четвертим зображення активним стає перше.
- Активне зображення відображається вверху галереї
та займає всю ширину галереї. Інші зображення відображаються
внизу одним рядком в довільному порядку.
- Поточне активне зображення анімується відповідно
до зразка (ефект збільшення та зміщення).
Частина 3. Доступність та якість
Виконати попередні дві частини у відповідності
до наступних вимог.
Вимоги до доступності та якості
- Дозволяється редагувати виключно файли,
які були перераховані в тексті завдань вище.
Всі інші файли, зокрема index.html, залишаються без змін.
-
Сторінка залишається доступною за умови
відсутності підтримки JavaScript, тобто виглядає так,
як до початку виконання роботи.
Додаткові відомості
Основний колір (червоний), який використано для кнопок,
та смуги прогресу, можна знайти серед наданого коду.
Для відображення смуги прогресу рекомендується використовувати
HTML Progress Element. Для зміни стандартного
стилю елемента рекомендується скористатися наступними псевдо-елементами:
::-webkit-progress-bar- псевдо-елемент, що описує контейнер смуги прогресу
::-webkit-progress-value- псевдо-елемент, що описує поточне значення смуги прогресу