Morphing Fullscreen Site Search Box With jQuery And CSS3

File Size: 2.73 KB
Views Total: 1563
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Morphing Fullscreen Site Search Box With jQuery And CSS3

Over the past few years, one of the newer trends in web design has been to create fullscreen site search experience.

This is a search box that makes full use of the webpage and all the real estate it has to offer, showcasing the search functionality with some really cool full screen effects.

This can be done using css3 transform and transition properties and only requires a little bit of jquery to help cleanup our html code.

How to use it:

1. Create the HTML for the fullscreen site search box. Note that we use Font Awesome iconic font for the search/close icons.

<!-- Close Button -->
<div class="close-btn">
  <span class="fas fa-times"></span>
</div>

<!-- Search Wrapper -->
<div class="wrapper">
  <!-- Search Button -->
  <div class="search-btn">
    <span class="fas fa-search"></span>
  </div>
  <!-- Search Box -->
  <div class="search-data">
    <input type="text" required>
    <div class="line"></div>
    <label>Type to search..</label>
    <span class="fas fa-search"></span>
  </div>
</div>

2. The necessary CSS & CSS3 styles.

.wrapper, .search-data{
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.wrapper{
  position: fixed;
  height: 0px;
  width: 0px;
  border-radius: 100%;
  background: linear-gradient(-135deg, #c850c0, #4158d0);
  transition: all 0.4s linear;
}
.wrapper.active{
  height: 4000px;
  width: 4000px;
}
.search-btn{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 60px;
  width: 60px;
  text-align: center;
  cursor: pointer;
  border-radius: 50%;
  background: linear-gradient(-135deg, #c850c0, #4158d0);
}
.search-btn span{
  color: #fff;
  font-size: 22px;
  line-height: 60px;
}
.search-data{
  position: absolute;
  height: 50px;
  width: 400px;
  display: flex;
  text-align: center;
  /* display: none; */
}
.search-data input{
  height: 100%;
  width: 100%;
  background: none;
  border: none;
  outline: none;
  font-size: 22px;
  font-weight: 500;
  color: #fff;
}
.search-data .line{
  position: absolute;
  height: 3px;
  width: 100%;
  background: #fff;
  bottom: 0;
  transform: scaleX(0);
  transition: transform 0.4s 0.3s linear;
}
.search-data .line.active{
  transform: scaleX(1);
}
.search-data label{
  position: absolute;
  top: 50%;
  left: 0;
  font-size: 20px;
  transform: translateY(-50%);
  pointer-events: none;
  color: rgba(255,255,255,0.7);
}
.search-data input:valid ~ label{
  opacity: 0;
}
.search-data span{
  color: #fff;
  position: absolute;
  width: 50px;
  font-size: 25px;
  right: 0;
  top: 0;
  line-height: 45px;
  cursor: pointer;
}
.close-btn{
  position: absolute;
  z-index: 99;
  right: 25px;
  top: 25px;
  font-size: 25px;
  color: #fff;
  cursor: pointer;
}
.search-data, .search-data span,
.search-data label, .close-btn{
  display: none;
}

3. Load the latest jQuery library right before the closing body tag.

<script src="/path/to/cdn/jquery.min.js"></script>

4. The main JavaScript (jQuery script) to enable the fullscreen search box.

$(".search-btn").click(function(){
  $(".wrapper").addClass("active");
  $(this).css("display", "none");
  $(".search-data").fadeIn(500);
  $(".close-btn").fadeIn(500);
  $(".search-data .line").addClass("active");
  setTimeout(function(){
    $("input").focus();
    $(".search-data label").fadeIn(500);
    $(".search-data span").fadeIn(500);
  }, 800);
 });

$(".close-btn").click(function(){
  $(".wrapper").removeClass("active");
  $(".search-btn").fadeIn(800);
  $(".search-data").fadeOut(500);
  $(".close-btn").fadeOut(500);
  $(".search-data .line").removeClass("active");
  $("input").val("");
  $(".search-data label").fadeOut(500);
  $(".search-data span").fadeOut(500);
});

This awesome jQuery plugin is developed by alexfandomers. For more Advanced Usages, please check the demo page or visit the official website.