Пошаговая форма регистрации на CSS3 и jQuery

Разместил: Apocalypse
24 мая 2016

Замечательная пошаговая форма регистрации, реализованная средствами CSS3 и jQuery, которая выполнена во flat стиле Для начала посмотрите ДЕМО Моё тестирование в редакторе: КЛИК Установка: 1#: В самый верх вашего CSS вставьте:

@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;
}

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;

}

2#: Следующий код поместите куда-то в body:

<!-- 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>

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

<li class="active">Создание аккаунта</li>

<li>Социальные профили</li>

<li>Персональные данные</li>

</ul>

<h2 class="fs-title">Создайте свой аккаунт</h2>

<h3 class="fs-subtitle">Это первый шаг</h3>

</fieldset>

<h2 class="fs-title">Социальные профили</h2>

<h3 class="fs-subtitle">Ваши аккаунты в социальных сетях</h3>

</fieldset>

<h2 class="fs-title">Персональные данные</h2>

<h3 class="fs-subtitle">Мы их никуда не отсылаем</h3>

</fieldset>

</form>

//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>

Метки: CSS3 jQuery jQuery Easing Пошаговая Регистрация Форма

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Пошаговая форма регистрации на CSS3 и jQuery

Читайте также:

Посетители сайта

Панель управления

Июнь 2023
Пн	Вт	Ср	Чт	Пт	Сб	Вс
			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

Пошаговая форма регистрации на CSS3 и jQuery

Читайте также:

Плавающее адаптивное вертикальное меню на CSS3 и jQuery

Автоматическое растягивание текстового поля по мере набора текста через плагин Autoresize на jQuery

Отражение любого текста на CSS3

Посетители сайта

Панель управления