-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
67 lines (59 loc) · 1.76 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html lang='en' class=''>
<head>
<meta property="og:image" content="https://media1.giphy.com/media/9xlBB84INr4GAymLqq/giphy.gif" />
<meta property="og:title" content="¯\_(ツ)_/¯" data-dynamic="true">
<meta property="og:description" content="dunno" data-dynamic="true">
<style>
html {
margin: 0;
height: 100%;
background: #000 center/contain no-repeat;
}
</style>
</head>
<body>
<script>
// Duration count in seconds
const duration = 1000 * 10;
// Giphy API defaults
const giphy = {
baseURL: "https://api.giphy.com/v1/gifs/",
key: "gG6AUEWy29wJxlU9388aTnNoDv6Jzm02",
tag: "shrug",
type: "random",
rating: "pg-13"
};
// Target gif-wrap container
const containerEl = document.documentElement;
const ogImageMeta = document.querySelector("meta[property='og:image']");
// Giphy API URL
let giphyURL = encodeURI(
giphy.baseURL +
giphy.type +
"?api_key=" +
giphy.key +
"&tag=" +
giphy.tag +
"&rating=" +
giphy.rating);
// Call Giphy API and render data
async function newGif() {
const res = await fetch(giphyURL);
const { data } = await res.json();
// Pre-load the image before setting as background (keep showing the last image while the next one loads)
const img = new Image();
img.src = data.images.original.url;
img.onload = () => {
// Set gif as bg image
containerEl.style.backgroundImage = `url(${img.src})`;
ogImageMeta.setAttribute("content", data.images.preview_gif.url);
// Call for new gif after duration
window.setTimeout(newGif, duration);
}
}
// Call Giphy API for new gif
newGif();
</script>
</body>
</html>