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

Question

[triadecom]

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

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

Буду рад услышать любые советы!

Answer 1

[Антон Шаманов]

по поводу прокрутки - у блока который выводит контент на экран телефона задаются width/height + overflow-y/overflow-x.
поищи на гитхабе - попадались готовые решения.

Answer 2

[Роман Рачков]

Для слайдера советую глянуть в сторону flickity легок в использовании и кастомизации. На счет того что бы контент не выходил за пределы рамки... ну как вариант разбить рамку на 4 отдельных картинки и поставить их вокруг слайдера. Не знаю как себя ведет строка состояния с челкой на айфоне, но скорее всего она перекрывает контент. Так что вообще нефиг парится.