Search concept

Developer
Rune Sejer Hoffmann
Size
4,003 Kb
Views
8,096
  1. Search concept Previews
  2. Search concept HTML Codes
  3. Search concept CSS Codes
  4. Search concept JS Codes

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 Previews
IQ Test

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
Search concept - Script Codes
Home Page Home
Developer Rune Sejer Hoffmann
Username RSH87
Uploaded December 10, 2022
Rating 3.5
Size 4,003 Kb
Views 8,096
Do you need developer help for Search concept?

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!

Rune Sejer Hoffmann (RSH87) Script Codes
Name
Fadout menu concept
Svg polycat
Crosshair loader
3d mini flip player concept
CSS Pixel game
RoadFURY
Perspective CSS hover effect
A Pen by Rune Sejer Hoffmann
Ecommerce animations
3D CSS Gameboy
Create amazing blog posts with AI!

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!