Search concept
How do I make an search concept?
A little search concept i had been thinking on lately. remember to try out a search.. What is a search concept? How do you make a search concept? This script and codes were developed by Rune Sejer Hoffmann on 10 December 2022, Saturday.
Search concept - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Search concept</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="searchContainer"> <div class="closecontainer"> <div class="close"></div> </div> <div class="search"> <svg class="searchIcon" viewBox="0 0 612.01 612.01"> <path fill="#6DC38F" d="M606.209,578.714L448.198,423.228C489.576,378.272,515,318.817,515,253.393C514.98,113.439,399.704,0,257.493,0 S0.006,113.439,0.006,253.393c0,139.954,115.276,253.393,257.487,253.393c61.445,0,117.801-21.253,162.067-56.586 l158.624,156.099c7.729,7.614,20.277,7.614,28.007,0C613.938,598.686,613.938,586.328,606.209,578.714z M257.493,467.8 c-120.326,0-217.869-95.992-217.869-214.407c0-118.414,97.543-214.407,217.869-214.407c120.327,0,217.869,95.993,217.869,214.407 C475.362,371.808,377.82,467.8,257.493,467.8z"/> </svg> <input class="searchInput" type="text"> <div class="result"> <p>The results for<span class="word"></span></p> <div class="results">Hey im a result</div> <div class="results">Hey look at me im also a result</div> <div class="results">Im definitely the best result </div> <div class="results">whatev</div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Search concept - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Poppins:400,300,700);
body { background: #1d2124; font-family: 'Poppins', sans-serif;
}
.searchContainer { height: 100%; width: 100%; position: relative; overflow: hidden;
}
.search { height: 0px; width: 0px; background: #6DC38F; position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 1000px; -webkit-transition: 0.6s all cubic-bezier(0.77, 0, 0.175, 1); transition: 0.6s all cubic-bezier(0.77, 0, 0.175, 1); z-index: 99;
}
.search.expand { height: 4000px; width: 4000px;
}
.search.expand .searchIcon { display: none;
}
.search .searchInput { position: absolute; display: none; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 300px; height: 40px; background: transparent; border: none; border-bottom: 3px solid white; outline: none; color: #333; font-size: 26px; z-index: 10;
}
.search .result { position: fixed; display: none; max-width: 1200px; height: 400px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #fff;
}
.search .result p { font-weight: 100; font-size: 38px;
}
.search .result span { font-weight: 700;
}
.search .result .results { display: none; margin-top: 30px; font-size: 16px; border-bottom: 1px solid white;
}
.searchIcon { position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 40px; height: auto; stroke: #06fea6; cursor: pointer;
}
.closecontainer { position: fixed; z-index: 999; height: 50px; width: 50px; top: 30px; right: 70px; cursor: pointer; display: none;
}
.closecontainer .close::before, .closecontainer .close::after { content: ""; position: absolute; border: solid #fff 2px; height: 20px; width: 20px; -webkit-transform: rotate(45deg); transform: rotate(45deg);
}
.closecontainer .close::before { border-width: 0px 2px 2px 0px; top: -5px;
}
.closecontainer .close::after { border-width: 2px 0px 0px 2px; top: 24px;
}
Search concept - Script Codes JS Codes
$(window).load(function() { var icon = $('.searchIcon'); var search = $('.search'); var close = $('.closecontainer'); var input = $('input.searchInput'); var result = $('.result'); var results = $('.results'); var word = $('.word'); var self = $(this); var setFocus; close.on('click', function() { toggleExpand(); }); icon.on('click', function() { toggleExpand(); }); function toggleExpand() { if (search.hasClass('expand')) { search.removeClass('expand'); close.fadeOut(); result.fadeOut(); results.fadeOut(); input.fadeOut('fast'); input.val(""); } else{ clearTimeout(setFocus); search.addClass('expand'); close.delay(400).fadeIn(); input.delay(700).fadeIn('slow'); setFocus = setTimeout(function(){ input.focus(); input.on('keydown', function(e) { if (e.which == 13) { var searchWord = " " + input.val(); input.fadeOut(); word.text(searchWord); result.fadeIn(); setFocus = setTimeout(function(){ results.each(function(index) { $(this).delay(80*index).fadeIn(500) }); }, 500); e.preventDefault(); } }); }, 1000); } }
});
![Search concept - Script Codes](http://shots.codepen.io/RSH87/pen/QyZYyL-512.jpg)
Developer | Rune Sejer Hoffmann |
Username | RSH87 |
Uploaded | December 10, 2022 |
Rating | 3.5 |
Size | 4,003 Kb |
Views | 8,096 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Svg polycat | 15,836 Kb |
Menu concept | 3,843 Kb |
Left right navigation | 3,136 Kb |
Social sharing button | 4,072 Kb |
AngularJS Todolist | 7,699 Kb |
Search concept | 4,003 Kb |
Fadout menu concept | 3,451 Kb |
Perspective CSS hover effect | 7,424 Kb |
Content aware dropdown | 5,716 Kb |
Pure css download button | 3,249 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Transitioning application screens with semantically named classes | Djgrant | 3,697 Kb |
Mini Profile | Frytyler | 3,828 Kb |
How to add Css Fold Notes In Blogger By Askwithloud.com | Askwithloud | 2,280 Kb |
Polygon Logo in CSS | Kai | 3,412 Kb |
LAMP PURE CSS with Animation | Dam62500 | 2,911 Kb |
Feedback Page | TessDiNapoli | 2,836 Kb |
TigerWoods Freecodecamp Page | Baileytj | 2,869 Kb |
Slider css only | Armandobau | 2,161 Kb |
Jquery 2d character movement | Drewtadams | 4,291 Kb |
Force Counter | Kenlauguico | 2,732 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!