Привет, ребята. Это забавная маленькая экспериментальная анимация, над которой я работаю.
Я использую iPhone 7 в качестве ежедневного драйвера и задавался вопросом, смогу ли я повторить один и тот же пользовательский интерфейс с плавными переходами и анимацией в Интернете. Итак, я использовал библиотеку под названием GSAP Для всех анимаций и переходов. Было очень легко создать большинство анимаций, используя GSAP из -за простоты его использования. Это все еще в процессе и просто забавный проект, над которым мне нравится работать в свободное время.
Вот то, что я есть сейчас.
Вот живая версия телефона. Есть незначительные ошибки, так как она находится в стадии разработки и экспериментальна.
https://iphone-7-ios13.netlify.app/
Некоторые из забавных фактов в телефоне
- DateTime На телефоне есть фактический таймер, записанный в JavaScript для отображения текущей даты и времени.
- Процент аккумулятора основан на устройстве, на котором он просматривается. В видео аккумулятор показал 70%, что было фактическим процентом батареи моего MacBook. Настольные компьютеры всегда будут показывать 100%.
- Если устройство не разблокировано в течение 3 секунд, Нажмите домой, чтобы разблокировать Сообщение появляется так же, как на реальном устройстве. (Было очень сложно кодировать эту текстовую анимацию)
- Настройки быстрого удара был построен с использованием jQuery Slider Анкет (CSS был полностью очищен и сделан, чтобы выглядеть как пальцы)
- Яркость устройства только что контролировалось с использованием фильтра яркости CSS и хранили в переменной JavaScript для поддержания яркости одинаковой при разблокировке устройства.
Я не создал этот проект для какого -либо конкретного варианта использования. Я просто хотел изучить, можно ли с легкостью сделать такие плавные и хорошие анимации и переходы в Интернете.
Если вам нравится этот забавный эксперимент, пожалуйста, понравится этот пост.:)
Оригинал: “https://dev.to/soorajsnblaze333/creating-an-iphone-7-replica-on-the-web-38l1”