/
index.html
140 lines (125 loc) · 4.2 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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Lottie実装編 | lottie-player</title>
<link rel="stylesheet" href="style.css">
<!-- ▼lottie-player用 -->
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<!-- ▼dotLottie-player用 -->
<script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.js"></script>
<!-- ▼dotLottie-wc用 -->
<script type="module" src="https://unpkg.com/@lottiefiles/dotlottie-wc@latest/dist/dotlottie-wc.js"></script>
</head>
<body>
<div class="wrapper">
<div class="itemWrapper">
<p>0.5倍速</p>
<lottie-player
autoplay loop speed="0.5"
src="../assets/present-anim.json"
></lottie-player>
<code>autoplay loop speed="0.5"</code>
</div>
<div class="itemWrapper">
<p>等倍速</p>
<lottie-player
autoplay loop
src="../assets/present-anim.json"
></lottie-player>
<code>autoplay loop</code>
</div>
<div class="itemWrapper">
<p>2倍速</p>
<lottie-player
autoplay loop speed="2"
src="../assets/present-anim.json"
></lottie-player>
<code>autoplay loop speed="2"</code>
</div>
<div class="itemWrapper">
<p>ホバー中にアニメーション</p>
<lottie-player
loop hover
src="../assets/present-anim.json"
></lottie-player>
<code>loop hover</code>
</div>
<div class="itemWrapper">
<p>ロード後3回だけ再生</p>
<lottie-player
autoplay loop count="3"
src="../assets/present-anim.json"
></lottie-player>
<code>autoplay loop count="3"</code>
</div>
<div class="itemWrapper">
<p>逆再生</p>
<lottie-player
autoplay loop direction="-1"
src="../assets/present-anim.json"
></lottie-player>
<code>autoplay loop direction="-1"</code>
</div>
<div class="itemWrapper">
<p>順↔︎逆再生の繰り返し</p>
<lottie-player
autoplay loop mode="bounce"
src="../assets/present-anim.json"
></lottie-player>
<code>autoplay loop mode="bounce"</code>
</div>
<div class="itemWrapper">
<p>5秒間休んで再生</p>
<lottie-player
autoplay loop intermission="5000"
src="../assets/present-anim.json"
></lottie-player>
<code>autoplay loop intermission="5000"</code>
</div>
<div class="itemWrapper">
<p>コントローラー表示</p>
<lottie-player
autoplay loop controls
src="../assets/present-anim.json"
></lottie-player>
<code>autoplay loop controls</code>
</div>
<div class="itemWrapper">
<p>背景色指定</p>
<lottie-player
autoplay loop background="#eef"
src="../assets/present-anim.json"
></lottie-player>
<code>autoplay loop background="#eef"</code>
</div>
<div class="itemWrapper">
<p>サイズ指定</p>
<lottie-player
autoplay loop style="width: 100px; height: 100px;"
src="../assets/present-anim.json"
></lottie-player>
<code>autoplay loop style="width: 100px; height: 100px;"</code>
</div>
<div class="itemWrapper">
<p>LottieFilesから読み込み</p>
<lottie-player
autoplay loop
src="https://lottie.host/6bed0136-e3d6-42be-ab92-fcb3f29e3cf4/a8u7RGCyP6.json"
></lottie-player>
<code>autoplay loop src="https://lottie.host/6bed0136-e3d6-42be-ab92-fcb3f29e3cf4/a8u7RGCyP6.json"</code>
</div>
<div class="itemWrapper">
<p>dotlottie-player</p>
<dotlottie-player autoplay loop src="../assets/present-anim.lottie"></dotlottie-player>
<code><dotlottie-player autoplay loop src="略"></dotlottie-player></code>
</div>
<div class="itemWrapper">
<p>dotlottie-wc</p>
<dotlottie-wc autoplay loop style="height: 236px;" src="../assets/present-anim.lottie"></dotlottie-wc>
<code><dotlottie-wc autoplay loop src="略"></dotlottie-wc></code>
</div>
</div>
</body>
</html>