3D красивая форма подписки на CSS3 + Javascript
↓ Также Вам будет интересно ↓
Красивая форма подписки – цель нашего сегодняшнего урока. Если Вы собираетесь заниматься бизнесом в интернете, имеете свой сайт, то Вам просто необходима подписная форма. Мы постараемся создать привлекательную, элегантную форму с эффектами CSS 3D преобразования и JQuery. Смотрите ещё пример привлекательной формы с эффектом JQuery.
Вот, что нам необходимо:
Modernizr
: для определение поддержки CSS 3D преобразования на стороне пользователя;Framework JQuery
: как двигатель для всей анимации и Ajax вызов;- Браузер, который поддерживают CSS3 и CSS 3D преобразование.
В форму присутствует только поле “Email”, но если Вы хотите, то можете добавить и поле “имя”. Наш 3D эффект будет использован, когда пользователь ввел свой электронный адрес и получает информацию. Итак, приступим…
HTML код
Ниже представлен весь “скелет” формы, для которой мы уже будем писать стили и эффекты jquery.
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 |
<div class="container"> <div class="subscribe"> <div class="subscribe-wrapper"> <div class="subscribe-form"> <div class="stripes top"></div> <div class="subscribe-space"> <h4>Форма подписки</h4> <p>Подпишитесь на нашу рассылку, и станьте одним из первых, кто будет в курсе всех новостей!</p> <hr /> <form action="" method="post"> <label for="email">Ваш email адрес</label> <input type="text" placeholder="" id="email" data-type="email"/> <button class="submit">Подписаться</button> </form> </div> <div class="stripes bottom"></div> </div> <div class="subscribe-success"> <div class="subscribe-space"> <h4>Спасибо!</h4> <p>.........</p> </div> </div> </div> </div> </div> |
CSS стилизация
Мы собираемся использовать множество свойств CSS3, на этот раз, например, box-sizing
, box-shadow
– тени, border-radius
– закругление углов, градиент и конечно CSS3 свойства преобразования. Ниже смотрите часть стилей.
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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 |
.container { width:360px; position:absolute; top:50%; left:50%; margin-left:-180px; margin-top:-220px; } .subscribe { display:block; width:100%; height:259px; position:relative; margin:0 auto; float:left; color:#333; } .subscribe-wrapper { display:block; width:100%; height:100%; } .subscribe-form, .subscribe-success { width:100%; height:100%; position:absolute; display:block; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#f4f4f4)); background: -webkit-linear-gradient(top, #f4f4f4, #fff); background: -moz-linear-gradient(top, #f4f4f4, #fff); background: -ms-linear-gradient(top, #f4f4f4, #fff); background: -o-linear-gradient(top, #f4f4f4, #fff); -webkit-box-shadow: 0 0 10px 3px rgba(100, 100, 100, 0.5); -moz-box-shadow: 0 0 10px 3px rgba(100, 100, 100, 0.5); -ms-box-shadow: 0 0 10px 3px rgba(100, 100, 100, 0.5); -o-box-shadow: : 0 0 10px 3px rgba(100, 100, 100, 0.5); box-shadow: 0 0 10px 3px rgba(100, 100, 100, 0.5); border-radius:10px; overflow:hidden; } .subscribe-success { display:none; } .stripes { width:100%; height:8px; background: #fff url(../images/stripes.gif); } .stripes.top { -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; } .stripes.bottom { -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; } .subscribe-space { height:244px; background:#fff; padding:20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; } .subscribe h4 { margin:0 0 15px 0; padding:0; font-size:22px; font-family: 'Racing Sans One', cursive; letter-spacing:-1px; line-height:10px; } .subscribe p { color:#aaa; padding:0; margin:0 0 10px 0; line-height:16px; } .subscribe hr { margin: 0 0 10px 0; border: 0; border-top: 1px dotted #ccc; } .subscribe label { font-weight:bold; display:block; margin-bottom:10px; } .subscribe input[type=text] { display:block; width:100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; border-radius:5px; padding:10px; border:1px solid #ddd; margin-bottom:20px; outline:0; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#fff)); background: -webkit-linear-gradient(top, #fff, #f9f9f9); background: -moz-linear-gradient(top, #fff, #f9f9f9); background: -ms-linear-gradient(top, #fff, #f9f9f9); background: -o-linear-gradient(top, #fff, #f9f9f9); box-shadow:inset 0 0 2px 1px rgba(150, 150, 150, 0.1); } .subscribe input[type=text].error { border:1px solid #d86e6d; } .subscribe button { display:block; width:100%; border-radius:5px; padding:10px; border: 1px solid #0e61a7; border-top: 1px solid #489ac0; color:#fff; font-weight:bold; font-size:14px; text-shadow:0 2px 0 rgba(100, 100, 100, 0.5); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#61b7e6), to(#3e8ed7)); background: -webkit-linear-gradient(top, #61b7e6, #3e8ed7); background: -moz-linear-gradient(top, ,#61b7e6 #3e8ed7); background: -ms-linear-gradient(top, #61b7e6, #3e8ed7); background: -o-linear-gradient(top, #61b7e6, #3e8ed7); cursor: pointer; } |
А вот и остальная часть кода подписной формы с 3D эффектом. Вы можете увидеть и оценить этот эффект, когда форма успешно отправлена. Форма будет отражена по вертикали и появится сообщение, которое Вы зададите.
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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
/* CSS3 Vertical Flip */ .subscribe.flip { -webkit-perspective:800px; -moz-perspective:800px; -ms-perspective:800px; -o-perspective:800px; perspective:800px; } .subscribe.flip .subscribe-wrapper { -webkit-transition: -webkit-transform 1s; -moz-transition: -moz-transform 1s; -ms-transition: -moz-transform 1s; -o-transition: -moz-transform 1s; transition: -moz-transform 1s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .subscribe.flip .subscribe-success { display:block; -webkit-transform: rotateX(-180deg); -moz-transform: rotateX(-180deg); -ms-transform: rotateX(-180deg); -o-transform: rotateX(-180deg); transform: rotateX(-180deg); } .subscribe.flip .subscribe-form, .subscribe.flip .subscribe-success { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .subscribe.flip .flipIt { -webkit-transform: rotateX(-180deg); -moz-transform: rotateX(-180deg); -ms-transform: rotateX(-180deg); -o-transform: rotateX(-180deg); transform: rotateX(-180deg); } |
Все, с оформлением заканчиваем, давайте перейдем с более интересному.
Javascript
Хорошо, теперь давайте оживим нашу форму. Мы связываем выполнение функции init()
с событием нажатия на кнопку отправки. В форме представлена простая проверка на правильный ввод электронного адреса. Если обнаружена ошибка, форма не будет обрабатываться (поле ввода будет обозначено красным цветом), а если ошибки не найдено, форма будет обработана с помощью AJAX.
Когда это произойдет, вы увидите движение в виде анимации сине-красных полос сверху и снизу. Как только запрос будет обработан, Вы увидите потрясающий эффект переворота формы, чтобы отобразить сообщение и дальнейшие инструкции для подписавшегося пользователя.
Вот код скрипта и всех необходимых функций:
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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
$(function () { var custom = { stripesScrollSpeed: 20, init: function () { //hook up click event to submit button $('.subscribe button.submit').click(function () { //clear all errors $('.subscribe input[type=text]').removeClass('error'); //Just a simple validate just to make sure fields are all filled //It basically loop through all textfield, if it's empty, add error class $('.subscribe input[type=text]').each(function () { if ($(this).val() == '') { $(this).addClass('error'); //just to validate the email } else if ($(this).data('type') == 'email' && !custom.validateEmail($(this).val())) { $(this).addClass('error'); } }); //if no error classes were found if ($('.subscribe .error').length == 0) { //call submit function custom.submit(); } return false; }); }, //ajax call for form submission submit: function () { //format form data into a long string var formData = $('.subscribe form').serialize(); //submit it to backend $.ajax({ type: "post", url: "submit.php", /* you will need to change this*/ data: formData, beforeSend: function () { custom.scrollStripes(); }, success: function(data){ if (data == 1) { //if browser support CSS3, use CSS3, otherwise just hide and show //check for csstransforms36 generated by modernizr if ($('html').hasClass('csstransforms3d')) { $('.subscribe').addClass('flip'); $('.subscribe .subscribe-wrapper').addClass('flipIt'); } else { $('.subscribe-form').fadeOut(); $('.subscribe-success').fadeIn(); } } } }); }, //function to animate the stripes scrollStripes: function () { var current = 0; //Calls the scrolling function repeatedly var init = setInterval(function () { // 1 pixel row at a time current -= 1; // move the background with backgrond-position css properties $('.subscribe .stripes').css("backgroundPosition", current+"px 0"); }, custom.stripesScrollSpeed); }, //simplest email validation, need to revalidate it via backend validateEmail: function (email) { var re = /\S+@\S+\.\S+/; return re.test(email); } } //run the script! custom.init(); }); |
Заключение
Вот она! Элегантная и красивая форма подписки с эффектами на CSS3 и JQuery. Я надеюсь, Вам понравится этот урок, дайте мне знать, если у Вас есть какие-либо вопросы. Успехов!
Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока:
Перевел: Владислав Бондаренко
http://denoy.ru/ @
Спасибо за перевод. Действительно красивая форма.
Подскажите: куда и как вписывать (в какой файл) настройки с адресом подписки ?
Для фидбернера или смартреспондера например …
/
Здравствуйте! Да, форма действительно эффектная, спасибо за отзыв. Чтобы интегрировать любую форму на какой-либо сервис рассылки, необходимо в коде редактировать форму,
form
. Если вам необходимо это сделать, обращайтесь – сделаем всё быстро и в лучшем виде:) Скайп: vladmaxi2013