Full screen Search with Css and Javascript

Full screen Search / Icono Buscador que al darle clic se ve en pantalla completa

By  Nikolay Talanov

<div class="search-overlay"></div>
<div class="scroll-cont">
 <div class="content">
 <div class="search">
 <div class="search__bg"></div>
 <div class="search__box">
 <input type="text" class="search__input" placeholder="Search"/>
 <div class="search__line"></div>
 <div class="search__close"></div>
 </div>
 </div>
 <p class="desc">This search input should work with any position/layout type, including normal pages with scroll. Just don't override .s--cloned styles for .search and everything will be okay. Requires specific styles for containers (check html+body and .scroll-cont styles) and .search-overlay element to be placed in the root.</p>
 </div>
</div>

*,:after,:before{box-sizing:border-box;margin:0;padding:0}
body,html{height:100%}
.search-overlay{z-index:-1000;overflow:hidden;position:fixed;left:0;top:0;width:100%;height:100%}
.search-overlay.s--active{z-index:9999}
.scroll-cont{position:relative;height:100%;overflow-y:auto}
.content{padding:50px}
.desc{max-width:900px;margin:0 auto;font-size:25px}
.search{position:relative;margin:0 auto 50px;width:116px;height:116px;-webkit-perspective:1000px;perspective:1000px}
.search:not(.s--active){cursor:pointer}
.search.s--hidden{opacity:0}
.search.s--cloned{position:absolute;left:50%;top:50%;right:auto;bottom:auto;margin:-58px 0 0 -58px}
.search.s--moving{-webkit-transition:-webkit-transform .4s cubic-bezier(0.56,-.49,.58,.9);transition:-webkit-transform .4s cubic-bezier(0.56,-.49,.58,.9);transition:transform .4s cubic-bezier(0.56,-.49,.58,.9);transition:transform .4s cubic-bezier(0.56,-.49,.58,.9),-webkit-transform .4s cubic-bezier(0.56,-.49,.58,.9)}
.search__bg{position:absolute;left:50%;top:50%;width:100%;height:100%;border-radius:50%;background:#F63;-webkit-transition:all .6s ease;transition:all .6s ease;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0);will-change:transform}
.search.s--active .search__bg{-webkit-transform:translate3d(-50%,-50%,0) scale(48);transform:translate3d(-50%,-50%,0) scale(48)}
.search__box{position:absolute;left:50%;top:50%;width:50px;height:50px;border:4px solid #fff;border-radius:25px;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transition:all .45s ease;transition:all .45s ease}
.search.s--active .search__box{width:510px;height:100px;border-radius:50px}
.search__input{width:100%;height:100%;background:0 0;border:none;outline:0;pointer-events:none;opacity:0;color:#fff;font-size:40px;-webkit-transition:opacity 0s;transition:opacity 0s}
.search__input::-webkit-input-placeholder{color:rgba(255,255,255,.4)}
.search__input::-moz-placeholder{color:rgba(255,255,255,.4)}
.search__input:-ms-input-placeholder{color:rgba(255,255,255,.4)}
.search__input::-ms-input-placeholder{color:rgba(255,255,255,.4)}
.search__input::placeholder{color:rgba(255,255,255,.4)}
.search.s--active .search__input{padding:23px 90px 23px 40px;pointer-events:auto;opacity:1;-webkit-transition:opacity .18s .48s;transition:opacity .18s .48s}
.search__line{position:absolute;left:50%;top:50%;width:20px;height:4px;border-radius:2px;background:#fff;-webkit-transform-origin:0 50%;transform-origin:0 50%;-webkit-transform:translate(14px,14px) rotate(45deg);transform:translate(14px,14px) rotate(45deg);-webkit-transition:all .48s;transition:all .48s}
.search__line:before{content:"";position:absolute;left:0;bottom:0;width:inherit;height:inherit;background:inherit;border-radius:inherit;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0;-webkit-transition:opacity .3s;transition:opacity .3s}
.search.s--active .search__line:before{opacity:1;-webkit-transition:opacity .3s .42s;transition:opacity .3s .42s}
.search.s--active .search__line{width:36px;height:6px;-webkit-transform:translate(180px,11px) rotate(-45deg);transform:translate(180px,11px) rotate(-45deg)}
.search__close{position:absolute;right:0;top:0;width:30px;height:30px;pointer-events:none}
.search.s--active .search__close{right:44px;top:33px;pointer-events:auto;cursor:pointer}

(function() {
  var $searchOverlay = document.querySelector(".search-overlay");
  var $search = document.querySelector(".search");
  var $clone, offsetX, offsetY;

  $search.addEventListener("click", function() {
    var $original = this;
    $clone = this.cloneNode(true);

    $searchOverlay.classList.add("s--active");

    $clone.classList.add("s--cloned", "s--hidden");
    $searchOverlay.appendChild($clone);

    var triggerLayout = $searchOverlay.offsetTop;

    var originalRect = $original.getBoundingClientRect();
    var cloneRect = $clone.getBoundingClientRect();

    offsetX = originalRect.left - cloneRect.left;
    offsetY = originalRect.top - cloneRect.top;

    $clone.style.transform = "translate("+ offsetX +"px, "+ offsetY +"px)";
    $original.classList.add("s--hidden");
    $clone.classList.remove("s--hidden");

    var triggerLayout = $searchOverlay.offsetTop;

    $clone.classList.add("s--moving");

    $clone.setAttribute("style", "");

    $clone.addEventListener("transitionend", openAfterMove);
  });

  function openAfterMove() {
    $clone.classList.add("s--active");
    $clone.querySelector("input").focus();

    addCloseHandler($clone);
    $clone.removeEventListener("transitionend", openAfterMove);
  };
  
  function addCloseHandler($parent) {
    var $closeBtn = $parent.querySelector(".search__close");
    $closeBtn.addEventListener("click", closeHandler);
  };

  /* close handler functions */
  function closeHandler(e) {
    $clone.classList.remove("s--active");
    e.stopPropagation();
    
    var $cloneBg = $clone.querySelector(".search__bg");

    $cloneBg.addEventListener("transitionend", moveAfterClose);
  };
  
  function moveAfterClose(e) {
    e.stopPropagation(); // prevents from double transitionend even fire on parent $clone
    
    $clone.classList.add("s--moving");
    $clone.style.transform = "translate("+ offsetX +"px, "+ offsetY +"px)";
    $clone.addEventListener("transitionend", terminateSearch);
  };
  
  function terminateSearch(e) {
    $search.classList.remove("s--hidden");
    $clone.remove();
    $searchOverlay.classList.remove("s--active");
  };
}());