На сегодняшний день сторисы стали одним из самых успешних медиформатов. Это мощный инструмент продаж, используемый разными площадками и приложениями. Кроме того, создавать их зачастую проще чем другие виды коммуникаций.
Мы предлагаем в качестве домашнего задания реализовать формат сторисов с дополнительными плюшками, чтобы закрепить на практике лекционный материал.
Страница должна работать в актуальной версии Chrome на десктопе и на Android/iOS (достаточно одной платформы – укажите в описании ДЗ, на какой ОС вы отлаживались).
Можно использовать подход mobile first, чтобы много не верстать под десктоп.
npm i
npm run start-
Интерфейс страницы:
Когда пользователь открывает страницу он сразу видит перед собой первый слайд, который автоматически проигрывает видео (здесь есть несколько).
Есть контролы, которые дают останавливать видео и переключать их вперед-назад (при переключении видео начинается с начала). При переключении видео влево/вправо оно начинается заново, а предыдущее останавливается.
* вместо контролов можно использовать свайпы.
После окончания видео слайд автоматически пролистывается на следующий, видео в нем автоматически запускается.
Анимация переключения слайдов должна работать без заметной просадки FPS на странице.
-
Сверху отображается прогресс-бар, который показывает текущий слайд и оставшееся время до перехода к следующему; после проигрывания последнего слайда отсчет времени останавливается. Прогресс-бар должен ползти без тормозов.
-
Фильтры для видео:
Видео может быть плохого качества (размытое, засвеченное или затемненное) - добавьте к слайду контролы, позволяющие регулировать его яркость и контрастность.
Для их настройки можно использовать
input.
Это задание для тех, кто заинтересован попробовать изученный материал на практике, проверки как в предыдущих домашних заданиях не будет.
Чуть позднее мы поделимся решением, с которым можно сопоставить свое :)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent