Пошаговая форма регистрации на CSS3 и 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 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 |
@import "http://fonts.googleapis.com/css?family=Montserrat"; /*custom font*/ /*basic reset*/ * { margin: 0; padding: 0; } html { height: 100%; /*Image only BG fallback*/ /*background = gradient + image pattern combo*/ background: linear-gradient(rgba(196,102,0,0.6),rgba(155,89,182,0.6)); } body { font-family: montserrat,arial,verdana; } /*form styles*/ #msform { width: 400px; margin: 50px auto; text-align: center; position: relative; } #msform fieldset { background: #fff; border: 0 none; border-radius: 3px; box-shadow: 0 0 15px 1px rgba(0,0,0,0.4); padding: 20px 30px; box-sizing: border-box; width: 80%; margin: 0 10%; /*stacking fieldsets above each other*/ position: relative; } /*Hide all except first fieldset*/ #msform fieldset:not(:first-of-type) { display: none; } /*inputs*/ #msform input,#msform textarea { padding: 15px; border: 1px solid #ccc; border-radius: 3px; margin-bottom: 10px; width: 100%; box-sizing: border-box; font-family: montserrat; color: #2C3E50; font-size: 13px; } /*buttons*/ #msform .action-button { width: 100px; background: #27AE60; font-weight: 700; color: #fff; border: 0 none; border-radius: 1px; cursor: pointer; padding: 10px 5px; margin: 10px 5px; } #msform .action-button:hover,#msform .action-button:focus { box-shadow: 0 0 0 2px white,0 0 0 3px #27AE60; } /*headings*/ .fs-title { font-size: 15px; text-transform: uppercase; color: #2C3E50; margin-bottom: 10px; } .fs-subtitle { font-weight: 400; font-size: 13px; color: #666; margin-bottom: 20px; } /*progressbar*/ #progressbar { margin-bottom: 30px; overflow: hidden; /*CSS counters to number the steps*/ counter-reset: step; } #progressbar li { list-style-type: none; color: #fff; text-transform: uppercase; font-size: 9px; width: 33.33%; float: left; position: relative; } #progressbar li:before { content: counter(step); counter-increment: step; width: 20px; line-height: 20px; display: block; font-size: 10px; color: #333; background: #fff; border-radius: 3px; margin: 0 auto 5px; } /*progressbar connectors*/ #progressbar li:after { content: ''; width: 100%; height: 2px; background: #fff; position: absolute; left: -50%; top: 9px; z-index: -1; /*put it behind the numbers*/ } #progressbar li:first-child:after { /*connector not needed before the first step*/ content: none; } /*marking active/completed steps green*/ /*The number of the step and the connector before it = green*/ #progressbar li.active:before,#progressbar li.active:after { background: #27AE60; color: #fff; } |
|
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 |
<!-- multistep form --> <form id="msform"> <!-- progressbar --> <ul id="progressbar"> <li class="active">Создание аккаунта</li> <li>Социальные профили</li> <li>Персональные данные</li> </ul> <!-- fieldsets --> <fieldset> <h2 class="fs-title">Создайте свой аккаунт</h2> <h3 class="fs-subtitle">Это первый шаг</h3> <input type="text" name="email" placeholder="Почта" /> <input type="password" name="pass" placeholder="Пароль" /> <input type="password" name="cpass" placeholder="Подтверждение пароля" /> <input type="button" name="next" class="next action-button" value="Вперёд" /> </fieldset> <fieldset> <h2 class="fs-title">Социальные профили</h2> <h3 class="fs-subtitle">Ваши аккаунты в социальных сетях</h3> <input type="text" name="twitter" placeholder="Твиттер" /> <input type="text" name="facebook" placeholder="Фейсбук" /> <input type="text" name="gplus" placeholder="Гугл +" /> <input type="button" name="previous" class="previous action-button" value="Назад" /> <input type="button" name="next" class="next action-button" value="Вперёд" /> </fieldset> <fieldset> <h2 class="fs-title">Персональные данные</h2> <h3 class="fs-subtitle">Мы их никуда не отсылаем</h3> <input type="text" name="fname" placeholder="Имя" /> <input type="text" name="lname" placeholder="Фамилия" /> <input type="text" name="phone" placeholder="Телефон" /> <textarea name="address" placeholder="Адрес"></textarea> <input type="button" name="previous" class="previous action-button" value="Назад" /> <input type="submit" name="submit" class="submit action-button" value="Готово!" /> </fieldset> </form> <script src='//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'> <script> //jQuery time var current_fs, next_fs, previous_fs; //fieldsets var left, opacity, scale; //fieldset properties which we will animate var animating; //flag to prevent quick multi-click glitches $(".next").click(function() { if (animating) return false; animating = true; current_fs = $(this).parent(); next_fs = $(this).parent().next(); //activate next step on progressbar using the index of next_fs $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active"); //show the next fieldset next_fs.show(); //hide the current fieldset with style current_fs.animate({ opacity: 0 }, { step: function(now, mx) { //as the opacity of current_fs reduces to 0 - stored in "now" //1. scale current_fs down to 80% scale = 1 - (1 - now) * 0.2; //2. bring next_fs from the right(50%) left = (now * 50) + "%"; //3. increase opacity of next_fs to 1 as it moves in opacity = 1 - now; current_fs.css({ 'transform': 'scale(' + scale + ')', 'position': 'absolute' }); next_fs.css({ 'left': left, 'opacity': opacity }); }, duration: 800, complete: function() { current_fs.hide(); animating = false; }, //this comes from the custom easing plugin easing: 'easeInOutBack' }); }); $(".previous").click(function() { if (animating) return false; animating = true; current_fs = $(this).parent(); previous_fs = $(this).parent().prev(); //de-activate current step on progressbar $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active"); //show the previous fieldset previous_fs.show(); //hide the current fieldset with style current_fs.animate({ opacity: 0 }, { step: function(now, mx) { //as the opacity of current_fs reduces to 0 - stored in "now" //1. scale previous_fs from 80% to 100% scale = 0.8 + (1 - now) * 0.2; //2. take current_fs to the right(50%) - from 0% left = ((1 - now) * 50) + "%"; //3. increase opacity of previous_fs to 1 as it moves in opacity = 1 - now; current_fs.css({ 'left': left }); previous_fs.css({ 'transform': 'scale(' + scale + ')', 'opacity': opacity }); }, duration: 800, complete: function() { current_fs.hide(); animating = false; }, //this comes from the custom easing plugin easing: 'easeInOutBack' }); }); $(".submit").click(function() { return false; }); </script> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
Вставил все как нужно на сайт и не работает
Мало просто вставить. Нужно ещё формы под свой движок подгонять
Вот к примеру. Нажимаю на кнопку вперед и вторая страничка выпадает вниз, а не просто красиво меняется с другой! в онлайн редакторах смотрел - там все хорошо работает!
Можно ссылку на страницу, где установлен данный скрипт?