@triadecom

Как реализовать простую анимированную модель телефона на сайт?

Доброго времени суток, Господа.

Приспичило мне в кои-то веки сделать сайт-визитку, и вот пришла в голову идея, добавить на главную страницу
анимированную модель телефона. То есть, реализовать свайпы экранов в телефоне. Не думаю, что это тяжело, но я, откровенный профан в фронтенде, но а реализовать данную фичу очень хочется. Примерно понимаю, что это должно работать по принципу карусель-галереи, но а как работать с углами и челкой айфона? Как задать прокрутку именно в рамках формы айфона? Накидал по-быстрому макет в фотошопе, выглядеть это будет примерно так:
5c6c9eb315b0f111083118.pngГлавная проблема в том, что на каждый из экранов должен содержать в себе функционирующие формы и ссылки, т.е. каждый экран - это не картинка, а именно блок.
Как быть в этом случае? Никаких идей на ум не приходит.

Буду рад услышать любые советы!
  • Вопрос задан
  • 385 просмотров
Пригласить эксперта
Ответы на вопрос 2
SilenceOfWinter
@SilenceOfWinter
та еще зажигалка...
по поводу прокрутки - у блока который выводит контент на экран телефона задаются width/height + overflow-y/overflow-x.
поищи на гитхабе - попадались готовые решения.
Ответ написан
Для слайдера советую глянуть в сторону flickity легок в использовании и кастомизации. На счет того что бы контент не выходил за пределы рамки... ну как вариант разбить рамку на 4 отдельных картинки и поставить их вокруг слайдера. Не знаю как себя ведет строка состояния с челкой на айфоне, но скорее всего она перекрывает контент. Так что вообще нефиг парится.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы