Search all the things

Developer
Casey Zumwalt
Size
5,660 Kb
Views
12,144
  1. Search all the things Previews
  2. Search all the things HTML Codes
  3. Search all the things CSS Codes
  4. Search all the things JS Codes

How do I make an search all the things?

What is a search all the things? How do you make a search all the things? This script and codes were developed by Casey Zumwalt on 07 November 2022, Monday.

Search all the things Previews
IQ Test

Search all the things - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Search all the things</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="example-container"> <div class="example"> <div class="search-box">2016 market predictions</div> <div class="content"> <img class="sources" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2933/web-sources.svg" alt="" /> <div class="results"> <div class="result"> <div class="image"> <img class="source" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2933/node-dropbox.svg"> </div> <div class="title">Market Predictions for Q3 2016</div> <div class="subtitle">Last updated: 4/23/2016</div> </div> <div class="result"> <div class="image"> <img class="source" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2933/node-web.svg"> </div> <div class="title">2016: A Good Year for Business</div> <div class="subtitle">[…] predictions for 2016 show strong […]</div> </div> <div class="result"> <div class="image"> <img class="source" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2933/node-drive.svg"> </div> <div class="title">Market Analysis 2016 - Acme Inc</div> <div class="subtitle">Made by the product team for NPI</div> </div> <div class="result"> <div class="image"> <img class="source" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2933/node-sharepoint.svg"> </div> <div class="title">Cheatsheet for Market Trends</div> <div class="subtitle">Quick reference guide for […]</div> </div> </div> </div> <div class="nodes"> <div class="node"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2933/node-dropbox.svg" alt="" /></div> <div class="node"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2933/node-web.svg" alt="" /></div> <div class="node"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2933/node-atlassian.svg" alt="" /></div> <div class="node"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2933/node-drive.svg" alt="" /></div> <div class="node"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2933/node-exchange.svg" alt="" /></div> <div class="node"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2933/node-sharepoint.svg" alt="" /></div> <div class="node"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2933/node-salesforce.svg" alt="" /></div> </div> </div> <div class="control"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Search all the things - Script Codes CSS Codes

* { box-sizing: border-box;
}
html,
body { width: 100%; height: 100%;
}
body { background: #ecf0f1;
}
.example-container { width: 575px; height: 420px; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); position: absolute; top: 50%; left: 50%;
}
.example-container .control { width: 20px; height: 20px; background: #258bf8; border-radius: 50%; position: absolute; top: 25px; left: 10px; cursor: pointer;
}
.example-container .control:before, .example-container .control:after { content: ''; background: rgba(37, 139, 248, 0.4); width: 100%; height: 100%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); position: absolute; top: 50%; left: 50%; border-radius: 50%; -webkit-animation: pulse 3s infinite ease; animation: pulse 3s infinite ease;
}
.example-container .control:after { -webkit-animation-delay: 1.5s; animation-delay: 1.5s;
}
.example { background-color: rgba(255, 255, 255, 0.5); background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2933/web-bg.png"); background-size: 575px; background-repeat: no-repeat; background-position: 0 5px; width: 575px; height: 420px; box-shadow: 0 0 0 1px #ddd, 0 14px 28px rgba(0, 0, 0, 0.08); border-radius: 10px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0) rotateX(50deg) rotateY(0deg) rotateZ(30deg); transform: translate3d(-50%, -50%, 0) rotateX(50deg) rotateY(0deg) rotateZ(30deg); position: relative; -webkit-transition: all 0.4s ease; transition: all 0.4s ease;
}
.example .search-box { position: absolute; top: 40px; left: -80px; width: calc(100% - 40px); height: 70px; background-color: white; background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2933/web-search-icon.svg"); background-repeat: no-repeat; background-position: 20px 26px; box-shadow: 0 0 0 2px #258bf8, 15px 30px 15px rgba(0, 0, 0, 0.05); border-radius: 3px; line-height: 68px; padding: 0 20px 0 50px; font-size: 1.25rem; -webkit-transition: all 0.4s 0.3s ease; transition: all 0.4s 0.3s ease; z-index: 3;
}
.example .content { width: 575px; height: 390px; position: absolute; bottom: 0; left: 0; border-radius: 10px; overflow: hidden; opacity: 0.5; -webkit-transition: all 0.4s 0.2s ease; transition: all 0.4s 0.2s ease; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
}
.example .content .sources { width: 120px; position: absolute; left: 20px; top: 110px; opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: all 0.3s ease; transition: all 0.3s ease;
}
.example .content .results { width: 350px; position: absolute; left: 200px; bottom: 20px;
}
.example .content .results .result { padding: 15px 0px 15px 55px; position: relative; box-shadow: 0 1px 0 #ddd;
}
.example .content .results .result:last-child { box-shadow: 0 0 0;
}
.example .content .results .result .image { width: 40px; height: 40px; position: absolute; top: 15px; left: 0;
}
.example .content .results .result .image img { max-width: 100%; position: absolute;
}
.example .content .results .result .title { color: #258bf8; margin: 0 0 4px;
}
.example .content .results .result .subtitle { color: #aaa; font-size: 14px;
}
.example .nodes { width: 575px; height: 390px; background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2933/web-nodes.png"); position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 0; z-index: 2; background-size: cover; opacity: 0; -webkit-transition: opacity 0.3s 0.3s ease; transition: opacity 0.3s 0.3s ease;
}
.example .nodes .node { width: 60px; height: 60px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); background: white; box-shadow: 0 0 0 1px #ccc, 0 2px 4px rgba(0, 0, 0, 0.08); border-radius: 50%; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; opacity: 0;
}
.example .nodes .node img { max-width: 60%; display: block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.example[data-animated="true"] { -webkit-transform: translate3d(-50%, -50%, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg); transform: translate3d(-50%, -50%, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg); -webkit-transition: all 0.4s ease; transition: all 0.4s ease; background-color: white;
}
.example[data-animated="true"] .content { opacity: 1;
}
.example[data-animated="true"][data-stage="one"] .search-box { top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); box-shadow: 0 0 0 2px #258bf8, 0px 15px 30px rgba(0, 0, 0, 0.05); width: 55%;
}
.example[data-animated="true"][data-stage="one"] .content .sources { opacity: 0; -webkit-transform: translateY(20%); transform: translateY(20%); -webkit-transition: all 0.3s 0.3s ease; transition: all 0.3s 0.3s ease;
}
.example[data-animated="true"][data-stage="one"] .content .results .result { -webkit-transition: all 0.3s 0.3s ease; transition: all 0.3s 0.3s ease; -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0;
}
.example[data-animated="true"][data-stage="one"] .nodes { opacity: 1;
}
.example[data-animated="true"][data-stage="one"] .nodes .node.active { -webkit-transition: all 0.3s 0.4s ease; transition: all 0.3s 0.4s ease; opacity: 1;
}
.example[data-animated="true"][data-stage="one"] .nodes .node.active:nth-child(1) { -webkit-transform: translate3d(-370%, -150%, 0); transform: translate3d(-370%, -150%, 0);
}
.example[data-animated="true"][data-stage="one"] .nodes .node.active:nth-child(2) { -webkit-transform: translate3d(-370%, 10%, 0); transform: translate3d(-370%, 10%, 0);
}
.example[data-animated="true"][data-stage="one"] .nodes .node.active:nth-child(3) { -webkit-transform: translate3d(110%, 100%, 0); transform: translate3d(110%, 100%, 0);
}
.example[data-animated="true"][data-stage="one"] .nodes .node.active:nth-child(4) { -webkit-transform: translate3d(-50%, -310%, 0); transform: translate3d(-50%, -310%, 0);
}
.example[data-animated="true"][data-stage="one"] .nodes .node.active:nth-child(5) { -webkit-transform: translate3d(110%, -230%, 0); transform: translate3d(110%, -230%, 0);
}
.example[data-animated="true"][data-stage="one"] .nodes .node.active:nth-child(6) { -webkit-transform: translate3d(-210%, 100%, 0); transform: translate3d(-210%, 100%, 0);
}
.example[data-animated="true"][data-stage="one"] .nodes .node.active:nth-child(7) { -webkit-transform: translate3d(270%, 170%, 0); transform: translate3d(270%, 170%, 0);
}
.example[data-animated="true"][data-stage="two"] .search-box { top: 40px; left: 20px; -webkit-transform: translate3d(0%, 0%, 0); transform: translate3d(0%, 0%, 0); width: calc(100% - 40px); box-shadow: 0 0 0 2px #ccc;
}
.example[data-animated="true"][data-stage="two"] .content .sources { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: all 0.6s 0.6s ease; transition: all 0.6s 0.6s ease;
}
.example[data-animated="true"][data-stage="two"] .content .results .result { -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0;
}
.example[data-animated="true"][data-stage="two"] .content .results .result:nth-child(1) { -webkit-animation: loadResult 0.8s 0.4s 1 ease forwards; animation: loadResult 0.8s 0.4s 1 ease forwards;
}
.example[data-animated="true"][data-stage="two"] .content .results .result:nth-child(2) { -webkit-animation: loadResult 0.8s 0.8s 1 ease forwards; animation: loadResult 0.8s 0.8s 1 ease forwards;
}
.example[data-animated="true"][data-stage="two"] .content .results .result:nth-child(3) { -webkit-animation: loadResult 0.8s 1.2s 1 ease forwards; animation: loadResult 0.8s 1.2s 1 ease forwards;
}
.example[data-animated="true"][data-stage="two"] .content .results .result:nth-child(4) { -webkit-animation: loadResult 0.8s 1.6s 1 ease forwards; animation: loadResult 0.8s 1.6s 1 ease forwards;
}
@-webkit-keyframes pulse { 0% { -webkit-transform: translate3d(-50%, -50%, 0) scale(1); transform: translate3d(-50%, -50%, 0) scale(1); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: translate3d(-50%, -50%, 0) scale(2); transform: translate3d(-50%, -50%, 0) scale(2); opacity: 0; }
}
@keyframes pulse { 0% { -webkit-transform: translate3d(-50%, -50%, 0) scale(1); transform: translate3d(-50%, -50%, 0) scale(1); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: translate3d(-50%, -50%, 0) scale(2); transform: translate3d(-50%, -50%, 0) scale(2); opacity: 0; }
}
@-webkit-keyframes loadResult { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
}
@keyframes loadResult { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
}

Search all the things - Script Codes JS Codes

$(document).ready(function(){ var searchTerm = $('.search-box').text(); var example = $('.example-container .example'); function setStage(stage) { example .attr('data-animated', true) .attr('data-stage', stage); } function finishAnimation() { example.removeAttr('data-stage data-animated'); } function typed() { var searchbar = $('.search-box'); var wordToType = searchTerm; var wordLength = wordToType.length; var typeSpeed = 80; var count = 0; function typeLoop() { setTimeout(function(){ var letters = wordToType.substring(0, count++); searchbar.text(letters); if (count <= wordLength) { typeLoop(); } else { setTimeout(function () { setStage('two'); }, 600); } }, typeSpeed); } typeLoop(); } function activeNodes() { var count = 1; $('.node').each(function () { var node = $(this); count++; var delay = 400 + (100 * count); setTimeout(function () { node.addClass('active'); }, delay); }); } function resetNodes() { $('.node').removeClass('active'); } $('.example-container .control').on('click', function (e) { e.preventDefault(); $(this).fadeOut(); setStage('one'); setTimeout(function () { typed(); activeNodes(); }, 300); setTimeout(function () { resetNodes(); finishAnimation(); }, 7000); setTimeout(function () { $('.example-container .control').fadeIn(); }, 7500); });
});
Search all the things - Script Codes
Search all the things - Script Codes
Home Page Home
Developer Casey Zumwalt
Username zumwalt
Uploaded November 07, 2022
Rating 3.5
Size 5,660 Kb
Views 12,144
Do you need developer help for Search all the things?

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!

Casey Zumwalt (zumwalt) Script Codes
Name
Animate in bugs
Pure CSS loading animation
Animated Robot
Sign Up
Video tiles
Dom to image
A Pen by Casey Zumwalt
Flowing background
Pure CSS Minimal Toggle Button
Bobbing preloader
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!