Bootstrap Snippet Full screen search animation using HTML CSS Javascript

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

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
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 
{
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
( 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 ) {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Full screen search animation"
Bootstrap 3.3.0 Snippet by hrk6610

Related: See More

Questions / Comments:

"Full screen search animation" Bootstrap 3.3.0 Snippet by hrk6610

Related: See More

Questions / Comments:

"Full screen search animation"
Bootstrap 3.3.0 Snippet by hrk6610