Создаем iphone с эффектом параллакса на JS | RUDEBOXМы продолжаем рассматривать фишки которые вошли в новую систему разработчиков из Купертино, одним из весьма интересных нововведений является эффект параллакса для фона, хочу Вам сразу сказать, что смотрится достаточно эффектно на устройстве, кроме этого вызывает эффект глубины картинки и подчеркивает иконки. Мы решили попробовать воссоздать нечто подобное, но для сайта. Я часто на сайтах замечал телефоны, но что если надо такие телефоны оживить. Как Вы, наверное уже поняли, сегодня я Вам покажу как реализовать эффект параллакса на мобильном устройстве.

Над самой оболочкой телефона мы не заморачивались, она не имеет особой значимости, по этому была реализована достаточно простым способом, а именно установкой рамок различной толщины и окружности. А вот начинка и меню рабочие! Вы можете с легкостью полистать меню и по наклонять. И так, давайте приступим.

Шаг 1. HTML

Начнем мы с разметки, здесь у нас будет несколько слоев, которые позиционируются относительно друг друга, при этом главное соблюдать  порядок. Мы устанавливаем окантовку телефона, фон с эффектом параллакса, иконки в рабочем состоянии и верхний и нижний статус бар.

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

Создаем iphone с эффектом параллакса на JS

Шаг 2. CSS

Для начала мы начнем собирать каркас, и указать его позиционирование на странице, мы установим размеры для каркаса:

Далее нам необходимо установить параметры изменения в пространстве для каждой грани:

Далее мы подключаем изображение, и устанавливаем его позиционирование в середине выше указанных граней:

Затем проделываем такие же манипуляции как и для рамки, нам необходимо установить угол наклона:

Последними шагами будет добавление нижнего дока и верхнего статус-бара, мы указываем позиционирование их, относительно рамки:

Первый стиль устанавливает параметры для верхнего статус-бара, а втором, как Вы уже догадались, для полки. И так, мы разобрались с фоном, теперь нам необходимо оформить иконки, так как большую часть у нас будет выполнять JS в работе меню, то стили не особо большие:

Здесь мы устанавливаем размеры навигации, и позиционирование по центру относительно каркаса. Далее нам необходимо установить размеры для иконок и оформить их сетку:

Далее установим индикаторы активного рабочего стола:

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

Шаг 3. JS

Практически всю часть работы у нас положена на JS, так мы будем использовать функции для вывода иконок, а также реализовываем возможность их манипуляций, при этом они разбиты на несколько рабочих столов:

Мы используем coffeescript для получения таких возможностей, кроме этого подключены такие скрипты как:

Modernizr — это JavaScript-библиотека, которая узнаёт, что из HTML5 и CSS3 умеет браузер пользователя. Определяя возможности браузера, разработчик может сделать откат некоторых функций для старых версий браузеров.

PrefixFree — плагин  разработан так, чтобы не использовать префиксов совсем, даже для свойств @keyframesили transition, которые нигде не поддерживаются без префиксов.

Touchable — скрипт позволяет быть отзывчивым для сенсорных дисплеев, что весьма расширяет возможности использования сайта.

Вот и все. Готово!

Читайте также: