Ваше имя Телефон Вопрос или комментарий

Верстка сайта JoyConnect

Верстка сайта JoyConnect.net
Верстка сайта JoyConnect.net
Сайт: http://joyconnect.net/
Фон растягивается по высоте и ширине веб страницы браузера.

Логика прокрутки страницы

1) Каждое действие на странице имеет привязку к конкретному движению скролом и свой временной показатель (хронометраж). Пока действие не завершено, дополнительное прокручивание игнорируется.

Возможность регулировать хронометраж (скорость) выполнения каждого действия (как переходов в слайдерах, появления элементов в блоках, так и переходов между блоками), так как возможно после настройки мы увидим, что какие-то блоки нужно еще растянуть либо сжать во времени. Мы насчитали примерно 18 активных движений прокрутки, которые должны показать все блоки и элементы страницы от начала и до самого конца.

2) Первый блок. Слайдер. На одно движение скролом мышки, стрелки (далее движение манипулятора), первый экран приложения начинает плавное передвижение в телефон. До тех пор, пока первый экран не станет в телефон, все дополнительные попытки скролить игнорируются. Как только первый экран приложения стал в телефон, действие считается завершённым. Эта логика сохраняется до последнего экрана приложения в слайдере. После перехода на следующий блок слайдер возвращается в изначальное положение.

Далее одно движение манипулятором и происходит полный переход ко Второму блоку . Как только переход завершился и блок стал в полный размер, начинают появляться внутренние элементы. Действие считается завершённым, когда появились все элементы. Во время перехода к следующему блоку элементы исчезают.

Одно движение манипулятором и происходит полный переход к третьему блоку – видео. Видео изначально растянуто по ширине экрана. Как только переход завершился и видео отображается в полный размер, оно автоматически начинает воспроизводиться (можно добавить небольшую задержку на запуск видео, например 0,5 сек). Спустя несколько секунд видео, действие считается завершённым и пользователю даётся возможность двигаться далее (такой вариант завершения действия стоит ещё обсудить). После перехода на следующий блок видео или останавливает или возвращает в начало.

Одно движение манипулятором и происходит полный переход к четвёртому блоку – Путеводитель. Переход завершён. Блок стал в полный размер. Появляется телефон с экраном загрузки игры. Далее слайдер действует по той же логике что и слайдер в первом блоке. Последний экран путеводителя в телефоне – действие считается завершённым. После перехода на следующий блок слайдер возвращает в начало.

Движение манипулятором. Полный переход к пятому блоку – Ссылка в магазин и Форма обратной связи. Появляются последовательно содержимое двух частей блока.