—»     —»   Разрабатываем форму авторизации в стиле Apple с помощью CSS 3D Transforms
  Раздел: Формы   Нет комментариев  

Разрабатываем форму авторизации в стиле Apple с помощью CSS 3D Transforms



Эй, а вы знали, что теперь вы можете вращать элементы в трехмерной плоскости посредством CSS3? Вероятно, знали, так как это возможно уже примерно года два. Конечно же, сначала это было возможным только в браузерах семейства Webkit – Safari и Chrome – но сейчас это так же возможно и в Firefox! Это означает, что больше половины мира (кто не использует браузер IE) смогут наблюдать продвинутые анимации и эффекты на CSS.

Разрабатываем форму авторизации в стиле Apple с помощью CSS 3D Transforms

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

Идея

У нас будет две формы – авторизация и восстановление пароля – но в конкретном случае будет видна лишь одна из них. Кликнув по ссылке (по полоске в примере), мы запустим CSS3-вращение по оси Y, что откроет нам доступ к другой форме посредством переворота.

Мы будем использовать jQuery для слежения за кликами по ссылкам, а также для добавления или удаления имени класса на элементе контейнера для форм. С помощью CSS мы будем применять трансформацию rotate (горизонтальное вращение) к обеим формам, но разница будет заключаться в 180 градусах угла, в зависимости от класса. Это позволит нам отображать формы на противоположных сторонах воображаемой платформы. Для того чтобы анимировать переход, мы будем использовать параметр CSS transition.

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

Верстка

На понадобятся 2 формы – авторизация и восстановление. У каждой формы будет кнопка подтверждения, а также поля для ввода текста/пароля:

index.html

<div id="formContainer">
<form id="login" method="post" action="./">
<a href="#" id="flipToRecover" class="flipLink">Forgot?</a>
<input type="text" name="loginEmail" id="loginEmail" placeholder="Email" />
<input type="password" name="loginPass" id="loginPass" placeholder="Password" />
<input type="submit" name="submit" value="Login" />
</form>
<form id="recover" method="post" action="./">
<a href="#" id="flipToLogin" class="flipLink">Forgot?</a>
<input type="text" name="recoverEmail" id="recoverEmail" placeholder="Your Email" />
<input type="submit" name="submit" value="Recover" />
</form>
</div>

Обратите внимание на ID элементов в форме. Мы будем широко использовать их в первой части CSS-кода. Лишь одна из форм будет видна на данный момент. Другая будет открываться в процессе анимации переворота. У каждой формы будет анкор flipLink. Клик по данному анкору будет переключать (добавлять или удалять) имя класса flipped к div’у #formContainer, что впоследствии запустит анимацию на CSS3.

Разрабатываем форму авторизации в стиле Apple с помощью CSS 3D Transforms

Код jQuery

Первый важный этап заключается в определении, поддерживает ли браузер трехмерные трансформации на CSS3. Если же нет, то мы предоставим откат (формы будут переключаться напрямую). Мы также будем использовать jQuery для слежения за кликами по анкорам flipLink. Так как мы не будем создавать панель управления для этих форм, нам нужно будет предотвратить их подтверждение.

Вот код, который выполняет то, что представлено выше:

assets/js/script.js

$(function(){

// Checking for CSS 3D transformation support
$.support.css3d = supportsCSS3D();

var formContainer = $('#formContainer');

// Listening for clicks on the ribbon links
$('.flipLink').click(function(e){

// Flipping the forms
formContainer.toggleClass('flipped');

// If there is no CSS3 3D support, simply
// hide the login form (exposing the recover one)
if(!$.support.css3d){
$('#login').toggle();
}
e.preventDefault();
});

formContainer.find('form').submit(function(e){
// Preventing form submissions. If you implement
// a backend, you will want to remove this code
e.preventDefault();
});

// A helper function that checks for the
// support of the 3D CSS3 transformations.
function supportsCSS3D() {
var props = [
'perspectiveProperty', 'WebkitPerspective', 'MozPerspective'
], testDom = document.createElement('a');

for(var i=0; i<props.length; i++){
if(props[i] in testDom.style){
return true;
}
}

return false;
}
});

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

Теперь мы можем перейти к разработке CSS-кода.

Разрабатываем форму авторизации в стиле Apple с помощью CSS 3D Transforms

CSS

CSS будет управлять всем, начиная от представления форм и элементов форм, до анимированных эффектов и переходов. Начнем с оформления контейнера для формы.

assets/css/styles.css

#formContainer{
width:288px;
height:321px;
margin:0 auto;
position:relative;

-moz-perspective: 800px;
-webkit-perspective: 800px;
perspective: 800px;
}

Кроме ширины, высоты, полей и расположения элемента, мы так же указываем перспективу. Данный параметр придаст глубины. Без него анимации будут выглядеть плоско (можете попробовать отключить этот параметр, чтобы понять, что мы имеем в виду). Чем выше значение, тем дальше будет точка схода.

Далее мы оформим сами формы.

#formContainer form{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;

/* Enabling 3d space for the transforms */
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;

/* When the forms are flipped, they will be hidden */
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;

/* Enabling a smooth animated transition */
-moz-transition:0.8s;
-webkit-transition:0.8s;
transition:0.8s;

/* Configure a keyframe animation for Firefox */
-moz-animation: pulse 2s infinite;

/* Configure it for Chrome and Safari */
-webkit-animation: pulse 2s infinite;
}

#login{
background:url('../img/login_form_bg.jpg') no-repeat;
z-index:100;
}

#recover{
background:url('../img/recover_form_bg.jpg') no-repeat;
z-index:1;
opacity:0;

/* Rotating the recover password form by default */
-moz-transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
transform:rotateY(180deg);
}

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

Параметр видимости backface важен, так как он сообщает браузеру о необходимости скрыть всю обратную сторону форм. В противном случае, у нас получится зеркальная версия формы восстановления вместо отображения лишь формы авторизации. Эффект переворота достигается за счет применения трансформации rotateY(180deg). Она вращает элемент справа налево. Так как мы указали параметр перехода, каждое вращение будет плавно анимировано.

Обратите внимание на объявление keyframe в самом низу раздела с формой. Оно определяет повторение анимации, которое не зависит от взаимодействия с пользователем. CSS-описание анимации дано ниже:

/* Firefox Keyframe Animation */
@-moz-keyframes pulse{
0%{ box-shadow:0 0 1px #008aff;}
50%{ box-shadow:0 0 8px #008aff;}
100%{ box-shadow:0 0 1px #008aff;}
}

/* Webkit keyframe animation */
@-webkit-keyframes pulse{
0%{ box-shadow:0 0 1px #008aff;}
50%{ box-shadow:0 0 10px #008aff;}
100%{ box-shadow:0 0 1px #008aff;}
}

Каждая из процентных групп соответствует временному отрезку в анимации. Так как это повторяющаяся, тень блока будет отображена в виде мягкого пульсирующего света.

Теперь давайте рассмотрим, что происходит как только мы кликаем по ссылке, как к #formContainer добавляется класс flipped:

#formContainer.flipped #login{

opacity:0;

/**
* Rotating the login form when the
* flipped class is added to the container
*/

-moz-transform:rotateY(-180deg);
-webkit-transform:rotateY(-180deg);
transform:rotateY(-180deg);
}

#formContainer.flipped #recover{

opacity:1;

/* Rotating the recover div into view */
-moz-transform:rotateY(0deg);
-webkit-transform:rotateY(0deg);
transform:rotateY(0deg);
}

Класс flipped приводит к вращению div’ов #login и #recover на 180 градусов. Это позволяет нам спрятать форму #login. Но, так как форма #recover уже встречалась нам с обратной стороны, она становится видимой вместо того, чтобы быть невидимой.

Объявление параметров плотности отображения лишь исправляют баг в браузерах на системах Android, которые игнорируют параметр видимости backface, и отображает перевернутую версию формы вместо того, чтобы спрятать ее. С помощью данного исправления, анимация начинает работать корректно даже на Android и iOS.

Готово!

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

Смотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, 3D, отправные формы, Apple
Опубликовал Design FactoRy   Прочитано (раз): 7866   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Лист оцинкованный полимерный
Оцинкованный лист с покрытием. Любые цвета. Качество. Доставка в регионы
proftehnastil.ru
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930