Skip to content

Instantly share code, notes, and snippets.

@maxchehab

maxchehab/fancyshmancysearch.html

Created October 14, 2017 20:38
Show Gist options
  • Save maxchehab/5d4fa351908093e6d545c5bcd47b5a9f to your computer and use it in GitHub Desktop.
Save maxchehab/5d4fa351908093e6d545c5bcd47b5a9f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
fancyshmancysearch.html
<html>
<head>
<title>Porsche Parter</title>
<link rel="shortcut icon" href="./static/genesis_logo.png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Material+Icons" rel="stylesheet">
<style>
body {
overflow: hidden;
}
.search {
color: white;
padding-left: 10px;
border: none !important;
overflow: hidden;
width: 100%;
height: 72px;
font-size: 50px;
}
.search::placeholder {
color: white;
}
.big {
animation: big .25s;
animation-fill-mode: forwards;
-webkit-animation: big .25s;
/* Chrome, Safari, Opera */
-webkit-animation-fill-mode: forwards;
}
.small {
animation: small .25s;
animation-fill-mode: forwards;
-webkit-animation: small .25s;
/* Chrome, Safari, Opera */
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes big {
from {
width: 100%;
height: 72px;
font-size: 50px;
}
to {
font-size: 120px;
width: 100%;
height: 100%;
}
}
@keyframes big {
from {
width: 100%;
height: 72px;
font-size: 50px;
}
to {
font-size: 120px;
width: 100%;
height: 100%;
}
}
@-webkit-keyframes small {
from {
font-size: 120px;
width: 100%;
height: 100%;
}
to {
width: 100%;
height: 72px;
font-size: 50px;
}
}
@keyframes small {
from {
font-size: 120px;
width: 100%;
height: 100%;
}
to {
width: 100%;
height: 72px;
font-size: 50px;
}
}
</style>
</head>
<body>
<input class="big browser-default light-blue search" autofocus placeholder="Search..." id="search" type="search" required>
<script>
$('.search').keypress(function(e) {
if (e.which == 13) {
$(this).addClass("small");
$(this).removeClass("big");
$(this).blur();
return false;
}
});
$('.search').focus(function(){
$(this).addClass("big");
$(this).removeClass("small");
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment