-
Notifications
You must be signed in to change notification settings - Fork 92
/
index.html
105 lines (103 loc) · 4.04 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
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
<!doctype html>
<html>
<head>
<title>Gifffer Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<style type="text/css">
body {
font-size: 20px;
font-family: Verdana;
margin: 0;
padding: 40px 0 40px 0;
text-align: center;
}
small {
display: block;
width: 600px;
text-align: center;
margin: 30px auto;
}
section {
max-width: 600px;
margin: 30px auto 0 auto;
padding-bottom: 10px;
}
hr {
max-width: 900px;
border-bottom: none;
margin: 20px auto 10px auto;
}
.image-big {
margin: 0 auto;
}
</style>
<body>
<h1>Gifffer</h1>
<small>Just click on the image below. <br />It's paused in the beginning of the animated Gif.</small>
<hr />
<section>
<p>No parameters<br /><small><img data-gifffer="image.gif" /></small></p>
<img data-gifffer="./imgs/image.gif" />
</section>
<hr />
<section>
<p>With Alt Text (for screen readers)<br /><small><img data-gifffer="image.gif"<br>data-gifffer-alt="some alt description of gif" /></small></p>
<img data-gifffer="./imgs/image.gif" data-gifffer-alt="some alt description of gif" />
</section>
<hr />
<section>
<p>Setting string size in pixels<br /><small><img data-gifffer="image-big.gif"<br />data-gifffer-width="250" data-gifffer-height="100" /></small></p>
<img data-gifffer="./imgs/image-big.gif" data-gifffer-width="250" data-gifffer-height="100" class="image-big"/>
</section>
<hr />
<section style="border:solid 1px #999;">
<p>Using percents<br /><small><img data-gifffer="image-big.gif" data-gifffer-width="33%" /></small></p>
<img data-gifffer="./imgs/image-big.gif" data-gifffer-width="33%" class="image-big"/>
</section>
<hr />
<section style="border:solid 1px #999;">
<p>Filling up the whole space<br /><small><img data-gifffer="image-big.gif" data-gifffer-width="100%" /></small></p>
<img data-gifffer="./imgs/image-big.gif" data-gifffer-width="100%" class="image-big"/>
</section>
<hr />
<section>
<p>Reset after 4000ms<br /><small><img data-gifffer="image-big.gif" data-gifffer-duration="4000" /></small></p>
<img data-gifffer="./imgs/image-big.gif" data-gifffer-duration="4000" class="image-big"/>
</section>
<hr />
<section>
<br /><br />
<a href="https://github.com/krasimir/gifffer">https://github.com/krasimir/gifffer</a>
<br /><br />
<a href="http://krasimirtsonev.com/blog/article/stop-autoplaying-your-gifs-stop-play-control">article: Stop autoplaying your Gifs</a>
</section>
<script type="text/javascript" src="./lib/gifffer.js"></script>
<script>
window.onload = function() {
Gifffer({
playButtonStyles: {
'width': '60px',
'height': '60px',
'border-radius': '30px',
'background': 'rgba(0, 0, 0, 0.3)',
'position': 'absolute',
'top': '50%',
'left': '50%',
'margin': '-30px 0 0 -30px'
},
playButtonIconStyles: {
'width': '0',
'height': '0',
'border-top': '14px solid transparent',
'border-bottom': '14px solid transparent',
'border-left': '14px solid rgba(0, 0, 0, 0.5)',
'position': 'absolute',
'left': '26px',
'top': '16px'
}
});
}
</script>
</body>
</html>