Visual GIPHY Search

Developer
Matt Popovich
Size
4,287 Kb
Views
32,384
  1. Visual GIPHY Search Previews
  2. Visual GIPHY Search HTML Codes
  3. Visual GIPHY Search CSS Codes
  4. Visual GIPHY Search JS Codes

How do I make an visual giphy search?

Search Giphy by entering a term into the bar and pressing Enter to open the GIF in a new tab. Queries the public Giphy API endpoint to find GIFs.. What is a visual giphy search? How do you make a visual giphy search? This script and codes were developed by Matt Popovich on 02 August 2022, Tuesday.

Visual GIPHY Search Previews
IQ Test

Visual GIPHY Search - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Visual GIPHY Search</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> <form>	<input type="text" placeholder="Search GIPHY">
</form>
<div class="hello-new-style"></div>
<div class="instructions">	<p class="one">1. Search for a term.</p>	<p class="two">2. Press <span>shift</span> to cycle through matching GIFs.</p>	<p class="three">3. Press <span>enter</span> to open the GIF.</p>
</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>

Visual GIPHY Search - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Product+Sans);
* { font-family: 'Product Sans', sans-serif;
}
body { height: 100vh; background-color: #FFF; text-align: center; perspective: 120vw; text-rendering: geometricPrecision; -webkit-font-smoothing: antialiased;
}
body input { background-color: rgba(0, 0, 0, 0.1); color: #FFF; text-transform: lowercase; vertical-align: middle; border: none; border: 5vh 0 10vh 0 solid #000; border-radius: 6px; outline: none; width: 90vw; height: 75vh; margin: 0 auto; text-align: center; font-size: 7vw; position: absolute; top: 12vh; bottom: 13vh; left: 0; right: 0; transform: rotateX(15deg) scale(0.8); animation: load-animation 5s ease-out; box-shadow: 0 90px 220px -30px rgba(0, 0, 0, 0.65);
}
@media (min-height: 300px) { body input { font-size: 8vw; }
}
@media (min-height: 300px) and (min-height: 400px) { body input { font-size: 9vw; }
}
@media (min-height: 300px) and (min-height: 400px) and (min-height: 500px) { body input { font-size: 9.75vw; }
}
@media (min-height: 300px) and (min-height: 400px) and (min-height: 500px) and (min-height: 600px) { body input { font-size: 10.5vw; }
}
body input::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.5); font-size: 40%; padding: 1em 0 0 1em; text-transform: uppercase; letter-spacing: 0.8em;
}
body input::-moz-placeholder { color: rgba(255, 255, 255, 0.5); font-size: 40%; padding: 1em 0 0 1em; text-transform: uppercase; letter-spacing: 0.8em;
}
body input:-ms-input-placeholder { color: rgba(255, 255, 255, 0.5); font-size: 40%; padding: 1em 0 0 1em; text-transform: uppercase; letter-spacing: 0.8em;
}
body input:-moz-placeholder { color: rgba(255, 255, 255, 0.5); font-size: 40%; padding: 1em 0 0 1em; text-transform: uppercase; letter-spacing: 0.8em;
}
body input:placeholder { color: rgba(255, 255, 255, 0.5); font-size: 40%; padding: 1em 0 0 1em; text-transform: uppercase; letter-spacing: 0.8em;
}
body .instructions { width: 100%; position: fixed; pointer-events: none;
}
body .instructions p { color: #262626; font-size: 150%; position: absolute; left: 0; right: 0; margin: 1em auto; opacity: 0;
}
body .instructions p span { padding: 0 0.3em; border-radius: 4px; background-color: #a6a6a6; color: white;
}
body .instructions p.one { -webkit-animation: instruction-1 10s ease-out; -moz-animation: instruction-1 10s ease-out; -o-animation: instruction-1 10s ease-out; animation: instruction-1 10s ease-out;
}
body .instructions p.two { -webkit-animation: instruction-2 10s ease-out; -moz-animation: instruction-2 10s ease-out; -o-animation: instruction-2 10s ease-out; animation: instruction-2 10s ease-out;
}
body .instructions p.three { -webkit-animation: instruction-3 10s ease-out; -moz-animation: instruction-3 10s ease-out; -o-animation: instruction-3 10s ease-out; animation: instruction-3 10s ease-out;
}
@keyframes load-animation { 0% { transform: rotateX(10deg) scale(1.1); } 100% { transform: rotateX(15deg) scale(0.8); }
}
@keyframes instruction-1 { 0% { opacity: 0; transform: translateY(-10px); } 2% { opacity: 0; transform: translateY(-10px); } 5% { opacity: 1; transform: translateY(0); } 25% { opacity: 1; transform: translateY(0); } 28% { opacity: 0; transform: translateY(10px); } 100% { opacity: 0; transform: translateY(10px); }
}
@keyframes instruction-2 { 0% { opacity: 0; transform: translateY(-10px); } 30% { opacity: 0; transform: translateY(-10px); } 33% { opacity: 1; transform: translateY(0); } 63% { opacity: 1; transform: translateY(0); } 66% { opacity: 0; transform: translateY(10px); } 100% { opacity: 0; transform: translateY(10px); }
}
@keyframes instruction-3 { 0% { opacity: 0; transform: translateY(-10px); } 68% { opacity: 0; transform: translateY(-10px); } 71% { opacity: 1; transform: translateY(0); } 97% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(10px); }
}

Visual GIPHY Search - Script Codes JS Codes

var gifId = '';
var resultNum = 0;
(function($){	// Swap input background GIF function swapGif(gifId) { $('.hello-new-style').empty(); $('.hello-new-style').html( '<style>input{ background-image: url(https://media.giphy.com/media/' + gifId + '/giphy.gif);background-size:cover;background-position:center;}</style>' );}	// Query GIPHY for new GIF	function getGif(term, num){	var limit = (num + 1).toString();	var xhr = $.get("http://api.giphy.com/v1/gifs/search?q=" + term + "&api_key=dc6zaTOxFJmzC&limit=" + limit);	xhr.done(function(data) {	gifId = data.data[num].id;	swapGif(gifId);	});	}	// Find GIFs as you type	$('input').keydown(function(e){	if(e.which !== 16) {	resultNum = 0;	var term = $('input').val();	getGif(term, 0);	}	if(e.which == 16) {	e.preventDefault();	resultNum = resultNum + 1;	var term = $('input').val();	getGif(term, resultNum);	}	});	// Open GIF with Enter	$('form').submit(function(e){	e.preventDefault();	window.open('https://media.giphy.com/media/' + gifId + '/giphy.gif');	});
})(jQuery);
Visual GIPHY Search - Script Codes
Visual GIPHY Search - Script Codes
Home Page Home
Developer Matt Popovich
Username mpopv
Uploaded August 02, 2022
Rating 3.5
Size 4,287 Kb
Views 32,384
Do you need developer help for Visual GIPHY Search?

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!

Matt Popovich (mpopv) Script Codes
Name
Polygon-style gradient pull quote
Text-rendering comparison
Trump Twitter Cover Generator
Magazine article
Animated Email Signup Form
A Pen by Matt Popovich
MoonJS Hello World
Hyperspace
Make Your Own Marco Mag
Paint on Heat Distortion
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!