CODYSHOP
темы и плагины для WordpressДобрый день. Сегодня хотел поделиться анимированной формой обратной связи. Наша разработка будет простой, всего 3 поля: поле ввода имени, почты и для короткого сообщения. Форму будем показывать при клике по зафиксированной на экране кнопке. Скачать архив.
Это интересно. Ради любопытства исследовал 18 случайных интернет-магазинов с формой обратной связи. Оказалось, что практически все формы состояли только из вышеупомянутых полей.
В архиве вы найдете только заготовку, функционал нужно натягивать. Собственно, суть поста в основном направлен на то, чтобы донести, как создать анимированную форму. Описывать анимацию не буду, лучше смотрите gif или скачайте архив.
Шаг 1: верстаем
Разместите перед закрывающим тегом body.
<div id="container"> <!-- кнопка --> <div class="button-wrapper"> <div class="layer"></div> <button class="main-button"> <div class="ripple"></div> </button> </div> <!-- форма --> <div class="layered-content"> <button class="close-button">×</button> <div class="form-box"> <div class="mail"></div> <h2>ОСТАВЬТЕ ЗАЯВКУ</h2> <label>Ваше имя <input id="name" class="txt" name="name" type="name" /> </label> <label>Ваш Email <input id="email" class="txt" name="email" type="email" /> </label> <label>Текст сообщения <textarea id="msg" class="txtarea" name="msg"></textarea> </label> <button class="send"> <div class="text">Отправить</div> <div class="loader"></div> <div class="done">Отправлено</div> </button> </div> </div> </div>
Шаг 2: оформляем форму и готовим анимацию
Анимацию привязываем к классам, которые мы будем добавлять элементам через jQuery.
button:focus { outline: none; } #container { width: 100%; height: 100vh; top: 0; bottom: 0; min-height: 300px; position: relative; overflow: hidden; } .button-wrapper { width: 50px; height: 100%; position: absolute; bottom: 0; right: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; right: 20px; bottom: 20px; } button { width: 50px; height: 50px; border: none; border-radius: 50%; cursor: pointer; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.4); z-index: 9; position: relative; } .main-button { background: #ff2670; -webkit-align-self: flex-end; -ms-flex-item-align: end; align-self: flex-end; } .ripple { position: absolute; left: 0; right: 0; bottom: 0; top: 0; border-radius: 25%; z-index: -9; background: transparent; border: 1px solid #ff2670; -webkit-transform: scale(.5); -ms-transform: scale(.5); transform: scale(.5); -webkit-transition: .3s all ease; transition: .3s all ease; opacity: 1; max-width: 50px; max-height: 50px; padding: 5px; background-position: center; background-size: 45px; background-repeat: no-repeat; background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDUxMCA1MTAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUxMCA1MTA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0iZW1haWwiPgoJCTxwYXRoIGQ9Ik00NTksNTFINTFDMjIuOTUsNTEsMCw3My45NSwwLDEwMnYzMDZjMCwyOC4wNSwyMi45NSw1MSw1MSw1MWg0MDhjMjguMDUsMCw1MS0yMi45NSw1MS01MVYxMDIgICAgQzUxMCw3My45NSw0ODcuMDUsNTEsNDU5LDUxeiBNNDU5LDE1M0wyNTUsMjgwLjVMNTEsMTUzdi01MWwyMDQsMTI3LjVMNDU5LDEwMlYxNTN6IiBmaWxsPSIjRkZGRkZGIi8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==); } .rippling { -webkit-animation: .3s rippling 1; animation: .3s rippling 1; -moz-animation: .3s rippling 1; } @-webkit-keyframes rippling { 25% { -webkit-transform: scale(1.5); transform: scale(1.5); opacity: 1; } 100% { -webkit-transform: scale(2); transform: scale(2); opacity: 0; } } @-moz-keyframes rippling { 25% { -moz-transform: scale(1.5); transform: scale(1.5); opacity: 1; } 100% { -moz-transform: scale(2); transform: scale(2); opacity: 0; } } @keyframes rippling { 25% { transform: scale(1.5); opacity: 1; } 100% { transform: scale(2); opacity: 0; } } .layer { position: absolute; left: 0; right: 0; bottom: 0; width: 50px; height: 50px; background: #ff2670; border-radius: 50%; z-index: -99; pointer-events: none; } .button-wrapper.clicked { -webkit-transform: rotate(90deg) translateY(-96px); -ms-transform: rotate(90deg) translateY(-96px); transform: rotate(90deg) translateY(-96px); right: 0; bottom: 0; -webkit-transition: .3s all ease .6s; transition: .3s all ease .6s; } .button-wrapper.clicked .main-button { opacity: 0; -webkit-transition: .3s all ease .3s; transition: .3s all ease .3s; } .button-wrapper.clicked .layer { -webkit-transform: scale(100); -ms-transform: scale(100); transform: scale(100); -webkit-transition: 1.75s all ease .9s; transition: 1.75s all ease .9s; } .layered-content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; opacity: 0; } .layered-content.active { opacity: 1; } .close-button { background: white; position: absolute; right: 20px; top: 20px; color: #ff2670; font-size: 30px; } .layered-content.active .close-button { -webkit-animation: .5s bounceIn; animation: .5s bounceIn; } .layered-content .content img { width: 80px; -webkit-shape-outside: 80px; shape-outside: 80px; border-radius: 50%; display: block; margin: 0 auto 15px; padding: 10px; box-sizing: border-box; background: white; box-shadow: 0 1px 3px 0 rgba(0,0,0,0.4); -webkit-transition: .3s all ease; transition: .3s all ease; } .form-box{ width: 100%; margin: 0 auto; max-width: 430px; } .form-box h2{ color: #fff; margin: 10px 0; font-weight: 900; font-size: 33px; text-align: center; } .form-box input, .form-box textarea{ width: 100%; float: left; padding: 10px; box-sizing: border-box; margin-bottom: 5px; border-radius: 3px; border: 0px; } .form-box label{ padding: 5px 10px; float: left; margin-bottom: 10px; font-size: 12px; color: #fff; box-sizing: border-box; width: 100%; border-radius: 3px; border: 1px solid rgba(255, 255, 255, 0.65); background: rgba(255, 255, 255, 0.25); } .form-box p { color: white; font-weight: 300; text-align: center; line-height: 1.5; } .form-box p a { font-size: 12px; background: white; padding: 2.5px 5px; color: #ff2670;; text-decoration: none; border-radius: 50px; display: inline-block; margin-left: 1.5px; } .form-box label { opacity: 0; } .layered-content.active .form-box label { opacity: 1; top: 0; -webkit-transition: .25s all ease 0.25s; transition: .25s all ease 0.25s; } <!-- кнопка отправить --> button { outline: 0; } button.active { outline: 0; } button.send { border: 2px solid #fff; color: white; width: inherit; height: inherit; border-radius: 50px; padding: 15px 80px; background: transparent; position: relative; overflow: hidden; -webkit-transform: translateY(-50%); transform: translateY(-50%); margin-top: 35px; } button.send .text.active { -webkit-transform: translateY(-350%) scale(0); transform: translateY(-350%) scale(0); -webkit-transition: 0.35s cubic-bezier(0.34, -0.61, 1, 0.64); transition: 0.35s cubic-bezier(0.34, -0.61, 1, 0.64); } button.send.active { padding: 0px 80px; -webkit-transition: 0.4s cubic-bezier(0.35, -0.77, 0.67, 1.88); transition: 0.4s cubic-bezier(0.35, -0.77, 0.67, 1.88); } button.send .loader { position: absolute; width: calc(0% - 4px); height: calc(100% - 4px); background-color: #fff; left: 2px; top: 2px; border-radius: 50px; } button.send .loader.active { width: calc(100% - 4px); -webkit-transition: 1.3s ease-in-out; transition: 1.3s ease-in-out; -webkit-transition-delay: 0.5s; transition-delay: 0.5s; } button.send .done { color: #232323; font-weight: 900; margin-top: -20px; -webkit-transform: translateY(300%) scale(0); transform: translateY(300%) scale(0); } button.send .text{ font-weight: 700; text-transform: uppercase; } button.send .done.active { -webkit-transform: translateY(0%) scale(1); transform: translateY(0%) scale(1); -webkit-transition: 0.4s cubic-bezier(0.34, -0.61, 1, 0.64); transition: 0.4s cubic-bezier(0.34, -0.61, 1, 0.64); color: #232323; text-transform: uppercase; } button.send.finished { padding: 15px 80px; -webkit-transition: 0.4s cubic-bezier(0.35, -0.77, 0.67, 1.88); transition: 0.4s cubic-bezier(0.35, -0.77, 0.67, 1.88); } .mail{ max-width: 256px; max-height: 256px; margin: 0 auto; width: 100%; height: 100px; background-repeat: no-repeat; background-size: 100px; background-position: center; background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA1MDQuMTI0IDUwNC4xMjQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUwNC4xMjQgNTA0LjEyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+CjxwYXRoIHN0eWxlPSJmaWxsOiNEMDdDNDA7IiBkPSJNMCwyMDAuODYyTDI1Mi4wNjIsNTEuMmwyNTIuMDYyLDE0OS42NjJ2MjIwLjU1NEgwVjIwMC44NjJ6Ii8+CjxwYXRoIHN0eWxlPSJmaWxsOiNFRkVGRUY7IiBkPSJNNTUuMTM4LDExLjgxNWgzOTMuODQ2YzguNjY1LDAsMTUuNzU0LDcuMDg5LDE1Ljc1NCwxNS43NTR2Mjc1LjY5MiAgYzAsOC42NjUtNy4wODksMTUuNzU0LTE1Ljc1NCwxNS43NTRINTUuMTM4Yy04LjY2NSwwLTE1Ljc1NC03LjA4OS0xNS43NTQtMTUuNzU0VjI3LjU2OUMzOS4zODUsMTguOTA1LDQ2LjQ3NCwxMS44MTUsNTUuMTM4LDExLjgxNSAgeiIvPgo8cGF0aCBzdHlsZT0iZmlsbDojMjZBNkQxOyIgZD0iTTQxNS45MDIsNDMuMzIzbDI1LjIwNi0zMS41MDhoNy44NzdjOC42NjUsMCwxNS43NTQsNy4wODksMTUuNzU0LDE1Ljc1NHYxNS43NTRINDE1LjkwMnogICBNMjExLjEwMiw0My4zMjNsMjUuMjA2LTMxLjUwOGg1NS4xMzhMMjY2LjI0LDQzLjMyM0gyMTEuMTAyeiBNMzkuMzg1LDQzLjMyM1YyNy41NjljMC04LjY2NSw3LjA4OS0xNS43NTQsMTUuNzU0LTE1Ljc1NGgzOS4zODUgIEw2OS4zMTcsNDMuMzIzSDM5LjM4NXoiLz4KPHBhdGggc3R5bGU9ImZpbGw6I0VGQzc1RTsiIGQ9Ik01MDQuMTIzLDQ2OC42NzdjMCwxMi45OTctMTAuNjM0LDIzLjYzMS0yMy42MzEsMjMuNjMxSDIzLjYzMUMxMC42MzQsNDkyLjMwOSwwLDQ4MS42NzQsMCw0NjguNjc3ICBWMjAwLjg2MmwyNTIuMDYyLDExMC4yNzdsMjUyLjA2Mi0xMTAuMjc3djI2Ny44MTVINTA0LjEyM3oiLz4KPHBhdGggc3R5bGU9ImZpbGw6I0U4QzE1QjsiIGQ9Ik01MDQuMTIzLDQ2OC42NzdjMCwxMi45OTctMTAuNjM0LDIzLjYzMS0yMy42MzEsMjMuNjMxSDIzLjYzMUMxMC42MzQsNDkyLjMwOSwwLDQ4MS42NzQsMCw0NjguNjc3ICB2LTQ3LjI2Mmw1MDQuMTIzLTIyMC41NTRWNDY4LjY3N3oiLz4KPHBhdGggc3R5bGU9ImZpbGw6I0Q2RDlEQjsiIGQ9Ik0xNjAuMjk1LDE1MS42MzFsMy4xNTEsMTYuNTQybC0yNS4yMDYtMzkuMzg1bC0zNS40NDYsNTUuMTM4Yy0wLjM5NCw1LjEyLDIyLjQ0OSw5LjA1OCw1MC44MDYsOS4wNTggIHM1MS4yLTMuOTM4LDUxLjItOS4wNThsLTMxLjExNC00Ni4wOEMxNzMuNjg2LDEzNy44NDYsMTYwLjI5NSwxNTEuNjMxLDE2MC4yOTUsMTUxLjYzMXogTTE2My40NDYsMTI5Ljk2OSAgYzUuNTE0LDAsOS44NDYtNC4zMzIsOS44NDYtOS44NDZzLTQuMzMyLTkuODQ2LTkuODQ2LTkuODQ2cy05Ljg0Niw0LjMzMi05Ljg0Niw5Ljg0NlMxNTcuOTMyLDEyOS45NjksMTYzLjQ0NiwxMjkuOTY5eiAgIE0yNDQuMTg1LDEyNi4wMzFoMTU3LjUzOGM0LjMzMiwwLDcuODc3LTMuNTQ1LDcuODc3LTcuODc3cy0zLjU0NS03Ljg3Ny03Ljg3Ny03Ljg3N0gyNDQuMTg1Yy00LjMzMiwwLTcuODc3LDMuNTQ1LTcuODc3LDcuODc3ICBTMjM5Ljg1MiwxMjYuMDMxLDI0NC4xODUsMTI2LjAzMXogTTQwMS43MjMsMTQxLjc4NUgyNDQuMTg1Yy00LjMzMiwwLTcuODc3LDMuNTQ1LTcuODc3LDcuODc3czMuNTQ1LDcuODc3LDcuODc3LDcuODc3aDE1Ny41MzggIGM0LjMzMiwwLDcuODc3LTMuNTQ1LDcuODc3LTcuODc3QzQwOS42LDE0NS4zMjksNDA2LjA1NSwxNDEuNzg1LDQwMS43MjMsMTQxLjc4NXogTTM2Mi4zMzgsMTczLjI5MkgyNDQuMTg1ICBjLTQuMzMyLDAtNy44NzcsMy41NDUtNy44NzcsNy44NzdzMy41NDUsNy44NzcsNy44NzcsNy44NzdoMTE4LjE1NGM0LjMzMiwwLDcuODc3LTMuNTQ1LDcuODc3LTcuODc3ICBDMzcwLjIxNSwxNzYuODM3LDM2Ni42NzEsMTczLjI5MiwzNjIuMzM4LDE3My4yOTJ6Ii8+CjxwYXRoIHN0eWxlPSJmaWxsOiNFMjU3NEM7IiBkPSJNMzEzLjUwMiw0My4zMjNsMjUuMjA2LTMxLjUwOGg1NS4xMzhMMzY4LjY0LDQzLjMyM0gzMTMuNTAyeiBNMTA4LjcwMiw0My4zMjNsMjUuMjA2LTMxLjUwOGg1NS4xMzggIEwxNjMuODQsNDMuMzIzSDEwOC43MDJ6Ii8+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=); }
Шаг 3: добавляем jQuery
jQuery(function(){ jQuery('.main-button').click(function(){ $('.button-wrapper').addClass('clicked'); setTimeout(function(){ $('.layered-content').addClass('active'); }, 1500); }); $('.close-button').on('click', function(){ $('.button-wrapper').removeClass('clicked'); $('.layered-content').removeClass('active'); }); // классы для кнопки отправить $('.send').on('click', function(){ $('.text').addClass('active'); $('.send').addClass('active'); $('.loader').addClass('active'); $('.send').delay(1700).queue(function(){ $(this).addClass('finished').clearQueue(); }); $('.done').delay(1600).queue(function(){ $(this).addClass('active').clearQueue(); }); }) });
Хочется отметить, что форма будет прекрасно смотреться, если будет работать на ajax – без перезагрузки.
А как вы сделали твиттер-лайки у себя на сайте? 😀
В формате коментария врядли получится уложиться. Думаю, в ближайшее время распишу.
Спасибо за ответ! Буду следить за новостями.
Красивая форма. Спасибо
Winter
Evans