Анимированная поисковая форма
Очень привлекательная по внешнему виду форма поиска анимированная с помощью css3 и jQuery. Использование css3 конечно отражается на кроссбраузерности, корректно форма работает только в последних версиях safari, chrome и firefox.
Простой стиль
Показывает только одну иконку поиска, но по клику мышкой происходит плавное появление поля ввода с кнопкой закрытия X (значение указывается в jаvascript ).
HTML
<div class="wrapper-simple">
<input type="text" placeholder="Поиск..." />
<input type="submit" value="" />
<img src="images/search-icon-big.png" />
</div>CSS
.wrapper-simple {
text-align: center;
margin: 0 auto;
display: block;
width: 60px;
height: 45px;
padding: 10px 5px;
background: -webkit-gradient(linear, left top, left bottom, from(#f5fafe), to(#e2edf4));
border-radius: 5px;
box-shadow: inset rgba(255, 254, 255, 1) 0 0.1em 2px,
#9bb6c9 0 1px 2px;
position: relative;
}
.wrapper-simple input[type=submit] {
margin-top: .2em;
z-index: 2;
position: relative;
vertical-align: top;
height: 43px;
min-width: 55px;
border-radius: 3px;
border: 1px solid #aa7818;
background: -webkit-gradient(linear, left top, left bottom, from(#ffb700), to(#ff8c00));
box-shadow: inset rgba(255, 255, 255, .5) 0 0.1em 0.1em;
cursor: pointer;
}
.wrapper-simple input[type=submit]:active {
box-shadow: inset rgba(0,0,0,.4) 0 1px 1px;
}
.wrapper-simple input[type=submit]:hover {
background: -webkit-gradient(linear, left top, left bottom, from(#ffcb48), to(#ff9c23));
}
.wrapper-simple input[type=text] {
font-family: Arial;
font-weight: bold;
color: #1a3d51;
background: #d8e6ef;
border-radius:2px;
padding: 10px 10px 15px 10px;
width: 250px;
border: 0;
font-size: 16px;
text-shadow: rgba(255, 255, 255, 0.7) 1px 1px 1px;
box-shadow: inset rgba(0,0,0,.4) 0 1px 1px;
position: absolute;
width: 1px;
z-index: 2;
padding-left: 2em;
margin-left: .2em;
}
.wrapper-simple img {
position: absolute;
top: 1.5em;
left: 1.5em;
z-index: 4;
}JS
Во всех вариантах первоначально подключаем jQuery библиотеку:
<script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>Далее скрипт к форме поиска с простым стилем:
$('.wrapper-simple input[type=submit]').toggle(function(){
$('.wrapper-simple').animate({'width':'300px'})
.end().find('.wrapper-simple input[type=text]').animate({'width': '250px'})
.end().find('.wrapper-simple img').animate({'marginLeft': '-5px'})
.end().find(this).animate({'marginLeft':'22em'}).attr('value', 'X');
}, function() {
$('.wrapper-simple').animate({'width':'60px'})
.end().find('.wrapper-simple input[type=text]').animate({'width': '1px'})
.end().find('.wrapper-simple img').animate({'marginLeft': '0'})
.end().find(this).animate({'marginLeft':'0'}).attr('value', '');
});
Кубический стиль
А как насчет более сложного варианта отображения поисковой формы?
Анимация будет выглядеть, как вращение куба с формой поиска. (см. Демо)
Создание куба уже несколько сложнее, чем предыдущий пример.
HTML
<div class="wrapper1">
<div class="content-wrapper1">
<div class="search-button1">
<span><img src="images/search-icon.png" /></span>
</div>
<div class="search-box1">
<input type="text" placeholder="Поиск..." />
<img src="images/close.png" />
</div>
</div>
</div>CSS
.wrapper1 {
display: block;
width: 300px;
margin: 0 auto;
-webkit-perspective : 1200px;
}
.search-button1 span {
display: block;
margin: 0 auto;
background: #643904;
border-radius: 30px;
width: 30px;
height: 30px;
box-shadow: rgba(255,255,255,.3) 0 1px 0px;
}
.search-button1 span img {
vertical-align: middle;
padding-top: 7px;
}
.search-button1:hover {
background: -webkit-gradient(linear, left top, left bottom, from(#ffcb48), to(#ff9c23));
}
.search-button1:active {
margin-top: 0.2em;
box-shadow: inset rgba(255, 254, 255, 0.2) 0 0.3em .3em,
#8e620e 0 0.3em 0,
rgba(0, 0, 0, 0.2) 0 0.5em 3px;
}
.search-box1 {
margin-top: -.6em;
display: none;
position: absolute;
width: 300px;
height: 50px;
padding: 10px 6px;
background: -webkit-gradient(linear, left top, left bottom, from(#f5fafe), to(#e2edf4));
border: 1px solid #9bb6c9;
border-bottom: 1px solid rgba(255,255,255,0.2);
border-radius: 5px;
box-shadow: inset rgba(255, 254, 255, 0.2) 0 0.3em .3em,
#899faf 0 .5em 0px,
rgba(0, 0, 0, 0.2) 0 .9em 3px;
-webkit-transform: rotate3d(1,0,0,90deg)
translateZ(20px);
}
.search-box1 input {
font-family: Arial;
font-weight: bold;
color: #1a3d51;
background: #d8e6ef;
border-radius:2px;
padding: 10px 10px 15px 10px;
width: 250px;
border: 0;
font-size: 16px;
text-shadow: rgba(255, 255, 255, 0.7) 1px 1px 1px;
box-shadow: inset rgba(0,0,0,.4) 0 1px 1px;
}
.search-box1 input:focus {
outline: none;
}
.search-box1 img {
opacity: .5;
position: absolute;
margin: .6em 0 0 -2em;
cursor: pointer;
-webkit-transition: 0.5s linear;
}
.search-box1 img:hover {
opacity: 1;
}
.hide-search-button {
display: none;
}
.show-search-button {
display: block;
}
.show-search-box {
display: block;
}
.showed-search-box {
display: block;
-webkit-transform: rotate3d(1,0,0,0deg);
}
.hidden-search-box {
-webkit-transform: rotate3d(1,0,0,90deg)
translateZ(25px);
}
.switch-show {
height: 50px;
-webkit-transform-style: preserve-3d;
-webkit-animation: showBox 0.5s ease-in-out;
}
.switch-hide {
height: 50px;
-webkit-transform-style: preserve-3d;
-webkit-animation: hideBox 0.5s ease-in-out;
}
.switch-show {
height: 50px;
-webkit-transform-style: preserve-3d;
-webkit-animation: showBox 0.5s ease-in-out;
}
.switch-hide {
height: 50px;
-webkit-transform-style: preserve-3d;
-webkit-animation: hideBox 0.5s ease-in-out;
}
@-webkit-keyframes showBox{
0% { -webkit-transform: rotate3d(1,0,0,0); }
100% { -webkit-transform: rotate3d(1,0,0,-90deg); }
}
@-webkit-keyframes hideBox{
0% { -webkit-transform: rotate3d(1,0,0,-90deg); }
100% { -webkit-transform: rotate3d(1,0,0,0); }
}
JS
Скрипт jquery будет таким:
/* Кубический стиль */
$('.search-button1').click(function() {
$('.content-wrapper1').addClass('switch-show');
$('.search-box1').addClass('show-search-box');
setTimeout(function(){
$('.content-wrapper1').removeClass('switch-show');
$('.search-button1').removeClass('show-search-button').addClass('hide-search-button');
$('.search-box1').addClass('showed-search-box');
},480);
});
$('.search-box1 img').click(function() {
$('.search-button1').removeClass('hide-search-button');
$('.search-box1').addClass('hidden-search-box');
$('.content-wrapper1').addClass('switch-hide');
setTimeout(function(){
$('.content-wrapper1').removeClass('switch-hide');
$('.search-button1').removeClass('show-search-button');
$('.search-box1').removeClass('show-search-box showed-search-box hidden-search-box');
},480);
});Кубический стиль с анимацией
Несколько усложненный предыдущий вариант поисковой формы.
HTML
<div class="wrapper2">
<div class="content-wrapper2">
<div class="search-button2">
<span><img src="images/search-icon.png" /></span>
</div>
<div class="search-box2">
<input type="text" placeholder="Поиск..." />
<img src="images/close.png" />
</div>
</div>
</div>JS
$('.search-box2 img').click(function() {
$('.search-button2').removeClass('hide-search-button');
$('.search-box2').addClass('hidden-search-box');
$('.content-wrapper2').addClass('switch-hide');
$('.search-button2').addClass('show-search-button').stop().delay(500).animate({'width':'50px'}, 500, function() {
$('.content-wrapper2').removeClass('switch-hide');
$('.search-button2').removeClass('show-search-button');
$('.search-box2').removeClass('show-search-box showed-search-box hidden-search-box');
$('.arrow').show();
});
});Ссылки
