Mercurial Hosting > linkmystyle

comparison src/tools/animation.html @ 0:8f4df159f06b

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
start public repo
author Franklin Schmidt <fschmidt@gmail.com>
date Fri, 11 Jul 2025 20:57:49 -0600
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:8f4df159f06b
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta name="viewport" content="width=device-width, initial-scale=1">
5 <script>
6 function resized() {
7 let imgs = document.querySelectorAll('img[rect]');
8 for( let img of imgs ) {
9 img.style['border-radius'] = 0.3 * img.width + 'px';
10 }
11 }
12 function loaded() {
13 resized();
14 let imgs = document.querySelectorAll('img');
15 for( let img of imgs ) {
16 img.style.visibility = 'visible';
17 img.style['animation-play-state'] = 'running';
18 }
19 }
20 </script>
21 <style>
22 body {
23 display: flex;
24 justify-content: center;
25 align-items: center;
26 height: 100vh;
27 margin: 0;
28 }
29 div {
30 width: 90%;
31 aspect-ratio: 950 / 535;
32 background-color: rgb(138, 127, 210);
33 position: relative;
34 }
35 div:hover img {
36 animation-play-state: paused;
37 }
38 img {
39 position: absolute;
40 top: 50%;
41 left: 50%;
42 transform: translate(-50%,-50%);
43 animation-duration: 7s;
44 animation-iteration-count: infinite;
45 box-shadow: 5px 5px 20px 1px rgba(0,0,0,0.5);
46 visibility: hidden;
47 animation-play-state: paused;
48 }
49 img[circle] {
50 border-radius: 50%;
51 }
52 img[bio] {
53 animation-name: bio;
54 width: 12%;
55 }
56 @keyframes bio {
57 0% {
58 opacity: 0;
59 transform: translate(-50%,-50%) scale(1);
60 }
61 15% {
62 opacity: 1;
63 transform: translate(-50%,-50%) scale(1.4375);
64 }
65 20%, 50% {
66 opacity: 1;
67 transform: translate(-50%,-50%) scale(1);
68 }
69 60% {
70 opacity: 1;
71 transform: translate(-50%,-50%) scale(1.1875);
72 }
73 65% {
74 opacity: 1;
75 transform: translate(-50%,-50%) scale(0.875);
76 }
77 70% {
78 opacity: 1;
79 transform: translate(-50%,-50%) scale(1.1875);
80 }
81 75% {
82 opacity: 1;
83 transform: translate(-50%,-50%) scale(0.875);
84 }
85 80%, 100% {
86 opacity: 1;
87 transform: translate(-50%,-50%) scale(1);
88 }
89 }
90 img[i1] {
91 animation-name: i1;
92 width: 14%;
93 }
94 @keyframes i1 {
95 0%, 28% {
96 opacity: 0;
97 top: 50%;
98 left: 50%;
99 }
100 38% {
101 opacity: 0.1;
102 }
103 48%, 78% {
104 opacity: 1;
105 top: 61%;
106 left: 89%;
107 }
108 85% {
109 opacity: 0.1;
110 }
111 90%, 100% {
112 opacity: 0;
113 top: 50%;
114 left: 50%;
115 }
116 }
117 img[i2] {
118 animation-name: i2;
119 width: 17%;
120 }
121 @keyframes i2 {
122 0%, 30% {
123 opacity: 0;
124 top: 50%;
125 left: 50%;
126 }
127 40% {
128 opacity: 0.1;
129 }
130 50%, 80% {
131 opacity: 1;
132 top: 74%;
133 left: 69%;
134 }
135 85% {
136 opacity: 0.1;
137 }
138 90%, 100% {
139 opacity: 0;
140 top: 50%;
141 left: 50%;
142 }
143 }
144 img[i3] {
145 animation-name: i3;
146 width: 15%;
147 }
148 @keyframes i3 {
149 0%, 26% {
150 opacity: 0;
151 top: 50%;
152 left: 50%;
153 }
154 36% {
155 opacity: 0.1;
156 }
157 46%, 76% {
158 opacity: 1;
159 top: 25%;
160 left: 75%;
161 }
162 85% {
163 opacity: 0.1;
164 }
165 90%, 100% {
166 opacity: 0;
167 top: 50%;
168 left: 50%;
169 }
170 }
171 img[i4] {
172 animation-name: i4;
173 width: 13%;
174 }
175 @keyframes i4 {
176 0%, 20% {
177 opacity: 0;
178 top: 50%;
179 left: 50%;
180 }
181 30% {
182 opacity: 0.1;
183 }
184 40%, 70% {
185 opacity: 1;
186 top: 76%;
187 left: 32%;
188 }
189 85% {
190 opacity: 0.1;
191 }
192 90%, 100% {
193 opacity: 0;
194 top: 50%;
195 left: 50%;
196 }
197 }
198 img[i5] {
199 animation-name: i5;
200 width: 16%;
201 }
202 @keyframes i5 {
203 0%, 22% {
204 opacity: 0;
205 top: 50%;
206 left: 50%;
207 }
208 32% {
209 opacity: 0.1;
210 }
211 42%, 72% {
212 opacity: 1;
213 top: 56%;
214 left: 12%;
215 }
216 85% {
217 opacity: 0.1;
218 }
219 90%, 100% {
220 opacity: 0;
221 top: 50%;
222 left: 50%;
223 }
224 }
225 img[i6] {
226 animation-name: i6;
227 width: 14%;
228 }
229 @keyframes i6 {
230 0%, 24% {
231 opacity: 0;
232 top: 50%;
233 left: 50%;
234 }
235 24% {
236 opacity: 0.1;
237 }
238 44%, 74% {
239 opacity: 1;
240 top: 20%;
241 left: 26%;
242 }
243 85% {
244 opacity: 0.1;
245 }
246 90%, 100% {
247 opacity: 0;
248 top: 50%;
249 left: 50%;
250 }
251 }
252 img[ins] {
253 animation-name: ins;
254 width: 7%;
255 }
256 @keyframes ins {
257 0%, 30% {
258 opacity: 0;
259 top: 50%;
260 left: 50%;
261 }
262 40% {
263 opacity: 0.1;
264 }
265 50%, 80% {
266 opacity: 1;
267 top: 25%;
268 left: 58%;
269 }
270 85% {
271 opacity: 0.1;
272 }
273 90%, 100% {
274 opacity: 0;
275 top: 50%;
276 left: 50%;
277 }
278 }
279 img[tk] {
280 animation-name: tk;
281 width: 7%;
282 }
283 @keyframes tk {
284 0%, 32% {
285 opacity: 0;
286 top: 50%;
287 left: 50%;
288 }
289 42% {
290 opacity: 0.1;
291 }
292 52%, 82% {
293 opacity: 1;
294 top: 45%;
295 left: 35%;
296 }
297 85% {
298 opacity: 0.1;
299 }
300 90%, 100% {
301 opacity: 0;
302 top: 50%;
303 left: 50%;
304 }
305 }
306 img[yt] {
307 animation-name: yt;
308 width: 7%;
309 }
310 @keyframes yt {
311 0%, 34% {
312 opacity: 0;
313 top: 50%;
314 left: 50%;
315 }
316 44% {
317 opacity: 0.1;
318 }
319 54%, 84% {
320 opacity: 1;
321 top: 23%;
322 left: 43%;
323 }
324 85% {
325 opacity: 0.1;
326 }
327 90%, 100% {
328 opacity: 0;
329 top: 50%;
330 left: 50%;
331 }
332 }
333 </style>
334 </head>
335 <body onload="loaded()" onresize="resized()">
336 <div>
337 <img bio rect src="https://test.linkmy.style/images/home/bio.png">
338 <img i1 rect src="https://test.linkmy.style/images/home/i1.png">
339 <img i2 rect src="https://test.linkmy.style/images/home/i2.png">
340 <img i3 rect src="https://test.linkmy.style/images/home/i3.png">
341 <img i4 rect src="https://test.linkmy.style/images/home/i4.png">
342 <img i5 rect src="https://test.linkmy.style/images/home/i5.png">
343 <img i6 rect src="https://test.linkmy.style/images/home/i6.png">
344 <img ins circle src="https://test.linkmy.style/images/home/ins.png">
345 <img tk circle src="https://test.linkmy.style/images/home/tk.png">
346 <img yt circle src="https://test.linkmy.style/images/home/yt.png">
347 </div>
348 </body>
349 </html>