@triadecom

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

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

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

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

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

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