How to replicate modal css3 animation effect when clicking search?

Question

I really like the effect of clicking on the search box and the search page coming up and the normal page fades out. How can I replicate this? Is this CSS3 only?

https://atmospherejs.com/

Answer 1

You can do that with CSS only and here is one way.

In this sample I used 2 radio inputs to keep track of whether to show the search box or not.

 html, body { margin: 0; height: 100%; } #shide, #sshow { display: none; } .container { width: 100%; height: 100%; background:url('http://lorempixel.com/1024/600/city/9/') no-repeat; background-size:cover; transition: transform .6s ease-out, opacity .6s ease-out; z-index: 1; } .showsearch{ position: absolute; top: 25px; right: 25px; background-color: rgba(255,255,255,0.9); color: #F00; font-size: 20px; border-radius: 5px; padding: 10px 25px; cursor: pointer; } .searchbox { position: fixed; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; background: rgba(255,255,255,0.9); transition: opacity .5s ease-in; } .searchbox .close{ position: absolute; top: 25px; right: 25px; width: 60px; height: 60px; cursor: pointer; } .searchbox .close:before, .searchbox .close:after { content: ' '; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; transform: rotate(45deg); background: #000; } .searchbox .close:after { transform: rotate(-45deg); } .searchbox > div { position: relative; top: 46%; left: 50%; transform: translate(-50%,-50%); text-align: center; } .searchbox > div > div { font-size: 24px; } #sshow:checked ~ .searchbox { opacity: 1; z-index: 2; } #sshow:checked ~ .container { opacity: 0.4; transform: scale(0.9, 0.9); } 

 <input type="radio" name="search" id="sshow"> <input type="radio" name="search" id="shide"> <div class="searchbox"> <label class="close" for="shide"></label> <div> <div>Search box</div> <input type="text" class="field"> </div> </div> <div class="container"> <label class="showsearch" for="sshow">Search</label> </div> 

Answer 2

Yes this is css along with a little bit of jquery you can make this happen. You will need to wrap your body content in a wrapper so you can scale it with css. Then use jquery toggleClass to give the body a class of something like search-open. Then you can use transitions for the rest like so:

Here is a fiddle demo Fiddle

Css:

.search-overlay{
  position:fixed;
  width:100%;
  height:100%;
  top:0;
  left:0;
  opacity:0;
  background:rgba(255,255,255,0.9);
  z-index: -1;
  transition: all 250ms ease-in-out;
}
.body-wrapper{
  transition: all 1200ms cubic-bezier(0.175, 0.885, 0.335, 1.05);
  width:100%;
  height:100%;
}
.search-open .search-overlay{
  opacity:1;
  z-index: 5;
}
.search-open .body-wrapper{
  position:fixed;
  top:0;
  left:0;
  opacity:0.5;
  transform: scale3d(0.85, 0.85, 1);
}

Html:

<div class="search-overlay">
     Search Content...
</div>
<div class="body-wrapper">
     Body Content...
 </div>

Then jquery to toggle the class use a button or something in the body content and the overlay to close it:

$('.search-button, .search-close').on("click", function(){
    $('body').toggleClass("search-open");
});