forked from buzzfeed/libgif-js
-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathdemo.html
109 lines (76 loc) · 5.06 KB
/
demo.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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>LC GIF Player Demo - by LCweb</title>
<!-- PAGE BASE CSS -->
<style type="text/css"> a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
*{box-sizing:border-box;line-height:normal}body{background:#fcfcfc;font-family:sans-serif;color:#303030}.container:after{content:"";display:block;clear:both}.header{text-align:center;padding:40px 20px 20px;background:#343434;border-bottom:4px solid #7dc242;position:relative;z-index:2;overflow:hidden;color:#fefefe;}#logo{border:0;background:#343434;padding:0;position:relative;bottom:-5px;width:29px;margin-right:5px}svg{filter:blur(1px);opacity:.015;position:absolute;top:0;left:0;right:0;bottom:0;transform:rotate(3deg) scale(1.35);z-index:-1}.left-shade{fill:#afafaf}.right-shade{fill:#bfbfbf}.header h2{font-size:34px;margin-top:-12px;}.header h4{font-size:18px;font-weight:400;line-height:135%;margin:15px 0;color:#f0f0f0;}.header h4 a{color:#cfcfcf;}.content{max-width:1200px; margin:auto;}
</style>
<!-- //////////////////////////////////////////////// -->
<!-- REQUIRED ELEMENTS -->
<link href="lc_gif_player.css" rel="stylesheet">
<script type="text/javascript" src="lc_gif_player.pack.js"></script>
<!-- //////////////////////////////////////////////// -->
<style>
.content {
display: flex;
align-items: center;
}
.content > div {
border: 20px solid transparent;
margin: auto;
background-clip: padding-box;
}
.target_1 {
max-height: 40vh;
max-width: 600px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h2>
<img id="logo" src=" data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAlCAMAAAD7q3BLAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAxQTFRFS1NFfsJCx8jKNDQ0SyWmjgAAAAR0Uk5T////AEAqqfQAAACySURBVHja7JTLFsQgCEOD/P8/jw9EgjiLWU88XQi3sSoUSgJaQwrRRNqQ4EWgbQEVcfKTuQgwEGxQGZANXnlnUCzAS0Hf+WXTB3lA1vDAPBxHEMWbWnM+bnFXse1g2ZnOBjshlhuPbPVZIIzRk7+JGYnAr4R8J/RPXGcaxXd77i71JxHi7+pVY0KMEVTudKXji69aj5WVidUvSgwRiH1bEMi9n4jc+26zCdT/ICdi9CPAAHRlCGHRLtsqAAAAAElFTkSuQmCC" />
LC GIF Player
</h2>
<h4>A proper <a href="https://github.com/buzzfeed/libgif-js" target="_blank">libgif-js</a> implementation by <a href="https://lcweb.it" target="_blank">LCweb</a></h4>
<svg width="100%" height="100%">
<pattern id="pattern-cubes" x="0" patternUnits="userSpaceOnUse" viewBox="0 0 10 16" height="100" width="116" y="68">
<g id="cube">
<path class="left-shade" d="M0 0l5 3v5l-5 -3z" />
<path class="right-shade" d="M10 0l-5 3v5l5 -3" />
</g>
<use x="5" y="8" xlink:href="#cube" />
<use x="-5" y="8" xlink:href="#cube" />
</pattern>
<rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-cubes)" />
</svg>
</div>
<div class="content">
<!-- //////////////////////////////////////////////// -->
<!-- REQUIRED HTML -->
<div class="target target_1">
<img src="" rel:animated_src="./example_gifs/sketch_creation.gif" />
</div>
<div class="target target_2" style="max-height: 400px;">
<img src="" rel:animated_src="./example_gifs/beard.gif" />
</div>
<!-- //////////////////////////////////////////////// -->
</div>
</div>
<!-- //////////////////////////////////////////////// -->
<!-- REQUIRED JAVASCRIPT -->
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
// no autoplay - no extra class - no prev/next commands
lc_gif_player('.target_1', false, '', ['move']);
// autoplay - no extra class - no fullscreen command
lc_gif_player('.target_2', true, '', ['fullscreen']);
});
</script>
<!-- //////////////////////////////////////////////// -->
</body>
</html>