"Full screen search animation"
Bootstrap 3.3.0 Snippet by hrk6610

<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 );

Related: See More


Questions / Comments: