<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title> Search Animation | 8-4 </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="search.css" />
<link rel="icon" type="images/search.png">
<script src="search.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1 class="head"> Search Animation</h1>
</div>
<div class="container">
<div id="morphsearch" class="morphsearch">
<form class="morphsearch-form">
<input class="morphsearch-input" type="search" placeholder="Search..."/>
</form>
<span class="morphsearch-close"></span>
</div><!-- /morphsearch -->
<header class="codrops-header">
</header>
<div class="overlay"></div>
</div><!-- /container -->
<script>
(function() {
var morphSearch = document.getElementById( 'morphsearch' ),
input = morphSearch.querySelector( 'input.morphsearch-input' ),
ctrlClose = morphSearch.querySelector( 'span.morphsearch-close' ),
isOpen = isAnimating = false,
// show/hide search area
toggleSearch = function(evt) {
// return if open and the input gets focused
if( evt.type.toLowerCase() === 'focus' && isOpen ) return false;
var offsets = morphsearch.getBoundingClientRect();
if( isOpen ) {
classie.remove( morphSearch, 'open' );
// trick to hide input text once the search overlay closes
// todo: hardcoded times, should be done after transition ends
if( input.value !== '' ) {
setTimeout(function() {
classie.add( morphSearch, 'hideInput' );
setTimeout(function() {
classie.remove( morphSearch, 'hideInput' );
input.value = '';
}, 300 );
}, 500);
}
input.blur();
}
else {
classie.add( morphSearch, 'open' );
}
isOpen = !isOpen;
};
// events
input.addEventListener( 'focus', toggleSearch );
ctrlClose.addEventListener( 'click', toggleSearch );
// esc key closes search overlay
// keyboard navigation events
document.addEventListener( 'keydown', function( ev ) {
var keyCode = ev.keyCode || ev.which;
if( keyCode === 27 && isOpen ) {
toggleSearch(ev);
}
} );
/***** for demo purposes only: don't allow to submit the form *****/
morphSearch.querySelector( 'button[type="submit"]' ).addEventListener( 'click', function(ev) { ev.preventDefault(); } );
})();
</script>
</body>
</html>
body
{
font-family: Trebuchet MS !important;
}
h1.head
{
color:#DE5260 !important;
}
.morphsearch
{
width: 400px;
min-height: 40px;
border:2px solid #eee;
position: absolute;
z-index: 10000;
top: 250px;
left:0px;
margin-left:10px;
transform-origin: 100% 0;
transition-property: min-height, width, top, right;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.morphsearch.open
{
width: 98%;
padding:20px 0px;
min-height: 100%;
top: 0px;
left: 0px;
}
.morphsearch-form
{
width: 100%;
height: 40px;
margin: 0 auto;
position: relative;
transition-property: width, height, transform;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.morphsearch.open .morphsearch-form
{
width: 80%;
height: 140px;
transform: translate3d(0,3em,0);
}
.morphsearch-input
{
width: 100%;
height: 100%;
padding: 0 10% 0 10px;
font-weight: 700;
border: none;
background: transparent;
font-size: 1em;
color:#fff;
transition: font-size 0.5s cubic-bezier(0.7,0,0.3,1);
}
.morphsearch.open .morphsearch-input
{
font-size: 100px;
border-bottom:3px solid #de5260;
}
/* placeholder */
.morphsearch-input::-webkit-input-placeholder {
color: #c2c2c2;
}
.morphsearch-input:-moz-placeholder {
color: #c2c2c2;
}
.morphsearch-input::-moz-placeholder {
color: #c2c2c2;
}
.morphsearch-input:-ms-input-placeholder {
color: #c2c2c2;
}
input[type="search"]
{
box-sizing: border-box;
}
.morphsearch-input:focus,
.morphsearch-submit:focus
{
outline: none;
}
.morphsearch.open .morphsearch-submit {
pointer-events: auto;
opacity: 1;
-webkit-transform: translate3d(-30px,-50%,0) scale3d(1,1,1);
transform: translate3d(-30px,-50%,0) scale3d(1,1,1);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.morphsearch-close {
width: 36px;
height: 36px;
position: absolute;
right: 1em;
top: 1em;
overflow: hidden;
text-indent: 100%;
cursor: pointer;
pointer-events: none;
opacity: 0;
-webkit-transform: scale3d(0,0,1);
transform: scale3d(0,0,1);
}
.morphsearch.open .morphsearch-close
{
opacity: 1;
pointer-events: auto;
transform: scale3d(1,1,1);
transition: opacity 0.3s, transform 0.3s;
transition-delay: 0.5s;
}
.morphsearch-close::before,
.morphsearch-close::after
{
content: '';
position: absolute;
width: 2px;
height: 100%;
top: 0;
left: 50%;
border-radius: 3px;
opacity: 0.8;
background: #de5260;
}
.morphsearch-close:hover.morphsearch-close::before,
.morphsearch-close:hover.morphsearch-close::after {
opacity: 1;
}
.morphsearch-close::before {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.morphsearch-close::after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.morphsearch-content {
color: #333;
margin-top: 4.5em;
width: 100%;
height: 0;
overflow: hidden;
padding: 0 10.5%;
background: #f1f1f1;
position: absolute;
pointer-events: none;
opacity: 0;
}
.morphsearch.open .morphsearch-content {
opacity: 1;
height: auto;
overflow: visible; /* this breaks the transition of the children in FF: https://bugzilla.mozilla.org/show_bug.cgi?id=625289 */
pointer-events: auto;
-webkit-transition: opacity 0.3s 0.5s;
transition: opacity 0.3s 0.5s;
}
/* Overlay */
.overlay
{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
opacity: 0;
pointer-events: none;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.morphsearch.open ~ .overlay {
opacity: 1;
}
@media screen and (max-width: 53.125em)
{
.morphsearch-input
{
padding: 0 25% 0 10px;
}
.morphsearch.open .morphsearch-input
{
font-size: 2em;
}
.morphsearch.open .morphsearch-form
{
height:70px;
}
}
@media screen and (max-width: 60.625em)
{
.morphsearch
{
width: 80%;
top: 180px;
right: 10%;
}
}
( function( window )
{
'use strict';
// class helper functions from bonzo https://github.com/ded/bonzo
function classReg( className ) {
return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}
// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;
if ( 'classList' in document.documentElement ) {
hasClass = function( elem, c ) {
return elem.classList.contains( c );
};
addClass = function( elem, c ) {
elem.classList.add( c );
};
removeClass = function( elem, c ) {
elem.classList.remove( c );
};
}
else {
hasClass = function( elem, c ) {
return classReg( c ).test( elem.className );
};
addClass = function( elem, c ) {
if ( !hasClass( elem, c ) ) {
elem.className = elem.className + ' ' + c;
}
};
removeClass = function( elem, c ) {
elem.className = elem.className.replace( classReg( c ), ' ' );
};
}
function toggleClass( elem, c ) {
var fn = hasClass( elem, c ) ? removeClass : addClass;
fn( elem, c );
}
var classie = {
// full names
hasClass: hasClass,
addClass: addClass,
removeClass: removeClass,
toggleClass: toggleClass,
// short names
has: hasClass,
add: addClass,
remove: removeClass,
toggle: toggleClass
};
// transport
if ( typeof define === 'function' && define.amd ) {
// AMD
define( classie );
} else {
// browser global
window.classie = classie;
}
})( window );
