Mercurial Hosting > linkmystyle

diff 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
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/tools/animation.html	Fri Jul 11 20:57:49 2025 -0600
@@ -0,0 +1,349 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<script>
+			function resized() {
+				let imgs = document.querySelectorAll('img[rect]');
+				for( let img of imgs ) {
+					img.style['border-radius'] = 0.3 * img.width + 'px';
+				}
+			}
+			function loaded() {
+				resized();
+				let imgs = document.querySelectorAll('img');
+				for( let img of imgs ) {
+					img.style.visibility = 'visible';
+					img.style['animation-play-state'] = 'running';
+				}
+			}
+		</script>
+		<style>
+			body {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				height: 100vh;
+				margin: 0;
+			}
+			div {
+				width: 90%;
+				aspect-ratio: 950 / 535;
+				background-color: rgb(138, 127, 210);
+				position: relative;
+			}
+			div:hover img {
+				animation-play-state: paused;
+			}
+			img {
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%,-50%);
+				animation-duration: 7s;
+				animation-iteration-count: infinite;
+				box-shadow: 5px 5px 20px 1px rgba(0,0,0,0.5);
+				visibility: hidden;
+				animation-play-state: paused;
+			}
+			img[circle] {
+				border-radius: 50%;
+			}
+			img[bio] {
+				animation-name: bio;
+				width: 12%;
+			}
+			@keyframes bio {
+				0% {
+					opacity: 0;
+					transform: translate(-50%,-50%) scale(1);
+				}
+				15% {
+					opacity: 1;
+					transform: translate(-50%,-50%) scale(1.4375);
+				}
+				20%, 50% {
+					opacity: 1;
+					transform: translate(-50%,-50%) scale(1);
+				}
+				60% {
+					opacity: 1;
+					transform: translate(-50%,-50%) scale(1.1875);
+				}
+				65% {
+					opacity: 1;
+					transform: translate(-50%,-50%) scale(0.875);
+				}
+				70% {
+					opacity: 1;
+					transform: translate(-50%,-50%) scale(1.1875);
+				}
+				75% {
+					opacity: 1;
+					transform: translate(-50%,-50%) scale(0.875);
+				}
+				80%, 100% {
+					opacity: 1;
+					transform: translate(-50%,-50%) scale(1);
+				}
+			}
+			img[i1] {
+				animation-name: i1;
+				width: 14%;
+			}
+			@keyframes i1 {
+				0%, 28% {
+					opacity: 0;
+					top: 50%;
+					left: 50%;
+				}
+				38% {
+					opacity: 0.1;
+				}
+				48%, 78% {
+					opacity: 1;
+					top: 61%;
+					left: 89%;
+				}
+				85% {
+					opacity: 0.1;
+				}
+				90%, 100% {
+					opacity: 0;
+					top: 50%;
+					left: 50%;
+				}
+			}
+			img[i2] {
+				animation-name: i2;
+				width: 17%;
+			}
+			@keyframes i2 {
+				0%, 30% {
+					opacity: 0;
+					top: 50%;
+					left: 50%;
+				}
+				40% {
+					opacity: 0.1;
+				}
+				50%, 80% {
+					opacity: 1;
+					top: 74%;
+					left: 69%;
+				}
+				85% {
+					opacity: 0.1;
+				}
+				90%, 100% {
+					opacity: 0;
+					top: 50%;
+					left: 50%;
+				}
+			}
+			img[i3] {
+				animation-name: i3;
+				width: 15%;
+			}
+			@keyframes i3 {
+				0%, 26% {
+					opacity: 0;
+					top: 50%;
+					left: 50%;
+				}
+				36% {
+					opacity: 0.1;
+				}
+				46%, 76% {
+					opacity: 1;
+					top: 25%;
+					left: 75%;
+				}
+				85% {
+					opacity: 0.1;
+				}
+				90%, 100% {
+					opacity: 0;
+					top: 50%;
+					left: 50%;
+				}
+			}
+			img[i4] {
+				animation-name: i4;
+				width: 13%;
+			}
+			@keyframes i4 {
+				0%, 20% {
+					opacity: 0;
+					top: 50%;
+					left: 50%;
+				}
+				30% {
+					opacity: 0.1;
+				}
+				40%, 70% {
+					opacity: 1;
+					top: 76%;
+					left: 32%;
+				}
+				85% {
+					opacity: 0.1;
+				}
+				90%, 100% {
+					opacity: 0;
+					top: 50%;
+					left: 50%;
+				}
+			}
+			img[i5] {
+				animation-name: i5;
+				width: 16%;
+			}
+			@keyframes i5 {
+				0%, 22% {
+					opacity: 0;
+					top: 50%;
+					left: 50%;
+				}
+				32% {
+					opacity: 0.1;
+				}
+				42%, 72% {
+					opacity: 1;
+					top: 56%;
+					left: 12%;
+				}
+				85% {
+					opacity: 0.1;
+				}
+				90%, 100% {
+					opacity: 0;
+					top: 50%;
+					left: 50%;
+				}
+			}
+			img[i6] {
+				animation-name: i6;
+				width: 14%;
+			}
+			@keyframes i6 {
+				0%, 24% {
+					opacity: 0;
+					top: 50%;
+					left: 50%;
+				}
+				24% {
+					opacity: 0.1;
+				}
+				44%, 74% {
+					opacity: 1;
+					top: 20%;
+					left: 26%;
+				}
+				85% {
+					opacity: 0.1;
+				}
+				90%, 100% {
+					opacity: 0;
+					top: 50%;
+					left: 50%;
+				}
+			}
+			img[ins] {
+				animation-name: ins;
+				width: 7%;
+			}
+			@keyframes ins {
+				0%, 30% {
+					opacity: 0;
+					top: 50%;
+					left: 50%;
+				}
+				40% {
+					opacity: 0.1;
+				}
+				50%, 80% {
+					opacity: 1;
+					top: 25%;
+					left: 58%;
+				}
+				85% {
+					opacity: 0.1;
+				}
+				90%, 100% {
+					opacity: 0;
+					top: 50%;
+					left: 50%;
+				}
+			}
+			img[tk] {
+				animation-name: tk;
+				width: 7%;
+			}
+			@keyframes tk {
+				0%, 32% {
+					opacity: 0;
+					top: 50%;
+					left: 50%;
+				}
+				42% {
+					opacity: 0.1;
+				}
+				52%, 82% {
+					opacity: 1;
+					top: 45%;
+					left: 35%;
+				}
+				85% {
+					opacity: 0.1;
+				}
+				90%, 100% {
+					opacity: 0;
+					top: 50%;
+					left: 50%;
+				}
+			}
+			img[yt] {
+				animation-name: yt;
+				width: 7%;
+			}
+			@keyframes yt {
+				0%, 34% {
+					opacity: 0;
+					top: 50%;
+					left: 50%;
+				}
+				44% {
+					opacity: 0.1;
+				}
+				54%, 84% {
+					opacity: 1;
+					top: 23%;
+					left: 43%;
+				}
+				85% {
+					opacity: 0.1;
+				}
+				90%, 100% {
+					opacity: 0;
+					top: 50%;
+					left: 50%;
+				}
+			}
+		</style>
+	</head>
+	<body onload="loaded()" onresize="resized()">
+		<div>
+			<img bio rect src="https://test.linkmy.style/images/home/bio.png">
+			<img i1 rect src="https://test.linkmy.style/images/home/i1.png">
+			<img i2 rect src="https://test.linkmy.style/images/home/i2.png">
+			<img i3 rect src="https://test.linkmy.style/images/home/i3.png">
+			<img i4 rect src="https://test.linkmy.style/images/home/i4.png">
+			<img i5 rect src="https://test.linkmy.style/images/home/i5.png">
+			<img i6 rect src="https://test.linkmy.style/images/home/i6.png">
+			<img ins circle src="https://test.linkmy.style/images/home/ins.png">
+			<img tk circle src="https://test.linkmy.style/images/home/tk.png">
+			<img yt circle src="https://test.linkmy.style/images/home/yt.png">
+		</div>
+	</body>
+</html>