16 +
10 2018
1Чт2Пт3Сб4Вс5Пн6Вт7Ср8Чт9Пт10Сб11Вс12Пн13Вт14Ср15Чт16Пт17Сб18Вс19Пн20Вт21Ср22Чт23Пт24Сб25Вс26Пн27Вт28Ср29Чт30Пт

Скачать Apple-подобная форма авторизации с CSS 3D-эффектами бесплатно.

У нас вы можете ознакомиться с Apple-подобная форма авторизации с CSS 3D-эффектами

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

Apple-подобная форма авторизации с CSS 3D-эффектами

Автор:  | Дата:  | Просмотров: 201,2К 



+1


Apple-подобная форма авторизации с CSS 3D-эффектами

Вы в курсе, что с помощью CSS3 можно переворачивать элементы в 3D-пространстве? Думаю, что да, ведь такая возможность доступна уже целых два года!

Сначала эту технологию поддерживали браузеры только на основе движка WebkitSafari и Chrome, но сейчас и Firefox присоединился к ним. Это значит, что больше половины пользователей (кроме тех, кто использует браузер IE) может увидеть современные анимационные эффекты на основе CSS.

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

Demo

Вес:
76,48 Kb
Загрузок:
3

Задумка


У нас будет две формы – одна для авторизации, а вторая для восстановления пароля. Только одна из форм будет видна глазу. Нажав на ссылку (в примере – это ленточки), мы запустим CSS3-функцию вращения элемента по оси Y. С помощью этой функции появится другая форма с эффектом переворота.

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

Разметка


Нам понадобится две формы – login и recover. Каждая форма будет иметь кнопку для отправки и поля для ввода типа text / password:

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>

Обратите внимание на идентификаторы элементов в форме. Мы будем интенсивно их использовать в части урока, связанной с CSS-кодом. Только одна из форм будет видна одновременно. Вторая будет появляться после нажатия на ссылку. Обоим ссылкам присвоен класс flipLink. Нажав на них, блоку #formContainer будет добавлен или удалён класс flipped. Это в свою очередь запустит CSS3-анимацию.

Apple-подобная форма авторизации с CSS 3D-эффектами


jQuery-код


Во-первых надо определить, поддерживает ли браузер CCS3 3D-преобразования. Если поддержки нет, то красивая анимация будет недоступна. Также 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;
}
});

Для удобства функционал, который проверяет браузер на поддержку CCS3 3D, вынесен в отдельную вспомогательную функцию. Она проверяет поддержку свойства perspective, которое придаёт объём форме.

Теперь мы можем перейти к разделу с CSS.
Apple-подобная форма авторизации с CSS 3D-эффектами


CSS-код


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

assets/css/styles.css
#formContainer{
width:288px;
height:321px;
margin:0 auto;
position:relative;
-moz-perspective: 800px;
-webkit-perspective: 800px;
perspective: 800px;
}

Мы установили width, height, margin, position, а также свойство perspective элементу. Это свойство придает объёма содержимому на странице. Без него анимационные эффекты будут выглядеть плоско (попробуйте отключить его, чтобы понять, о чём я говорю). Чем больше его значение, тем сильнее эффект.

Далее мы будем стилизировать сами формы.
#formContainer form{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;

/* Включение 3d пространства для переворота */
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;

/* Когда формы переворачиваются, они скрываются */
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;

/* Включение плавного анимированного перехода */
-moz-transition:0.8s;
-webkit-transition:0.8s;
transition:0.8s;

/* Конфигурация анимации keyframe для Firefox */
-moz-animation: pulse 2s infinite;

/* Конфигурация для Chrome и 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;
/* По умолчанию переворот восстановления пароля */
-moz-transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
transform:rotateY(180deg);
}

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

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

Обратите внимание на объявление keyframe внизу секции формы. Он устанавливает повторяющуюся (объявленную с помощью ключевого слова infinite) keyframe animation, которая не зависит от действий пользователя.

Ниже представлено описание 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;

/**
* Поворот формы авторизации, далее
* класс flipped добавляется контейнеру
*/

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

#formContainer.flipped #recover{

opacity:1;
/* Поворот формы восстановления в видимое состояние */
-moz-transform:rotateY(0deg);
-webkit-transform:rotateY(0deg);
transform:rotateY(0deg);
}

Появление класса flipped у блоков #login и #recover перевернёт их на 180 градусов. Если блок #login перевернётся и исчезнет, то #recover развернётся к нам лицевой стороной и будет видимым.

Установка свойства opacity нужна только для того, чтобы устранить баг в браузере Android, который игнорирует свойство backface-visibility и показывает зеркально отраженную версию формы вместо того, чтобы скрыть её. С этой поправкой анимация работает даже на Android и iOS в дополнение к десктопным браузерам.

Готово!
CSS 3D-преобразования открывают двери для разнообразных интересных эффектов, которые раньше реализовывались с помощью тяжеловесной технологии Flash. Теперь мы можем создавать легковесные, доступные для сканирования поисковыми роботами, семантически правильные сайты, которые отлично выглядят и без проблем работают в “отстающих” браузерах.

Demo

Вес:
76,48 Kb
Загрузок:
3



Скачать торрент


Готовим для Вас Бонус, пожалуйста подождите!





Поиск торрент раздач, пожалуйста подождите!

У нас вы можете скачать бесплатно Apple-подобная форма авторизации с CSS 3D-эффектами torrent, Скачать Apple-подобная форма авторизации с CSS 3D-эффектами торрент можно по ссылкам расположенным выше. Для скачивания вам понадобиться вот эта программа µTorrent.

Данный материал предоставлен сайтом Quantum-Soft.NET исключительно в ознакомительных целях.

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

Ключевые теги: Apple, форма, эффектами, авторизации





Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.