Na0ki/mugiko.moe.html

## mugiko.moe.html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>麦子.moe</title>

    <style>
        .container {
            width: 100%;
            height: 100%;
            max-height: 500px;
        }

        .marquee-animation {
            overflow: hidden;
        }

        .marquee-animation>img {
            animation: marquee 30s linear infinite, updown 1.5s linear infinite;
            padding-left: 100%;
        }

        /* 横移動 */
        @keyframes marquee {
            from {
                transform: translate(0);
            }

            to {
                transform: translate(-100%);
            }
        }

        /* 縦方向のふよふよ */
        @keyframes updown {
            from {
                margin-top: 50px;
            }

            50% {
                margin-top: 0;
            }

            to {
                margin-top: 50px;
            }
        }
    </style>

    <script>
        window.addEventListener('resize', function () {
            // mugiko must be present
            var target = document.getElementById('mugiko');

            // 横幅1920pxの時に30sで調整したので、それを元に横幅に応じてアニメーションの速度を変える
            var duration = 30 * (window.innerWidth / 1920);
            target.style.animation = `marquee ${duration}s linear infinite, updown 1.5s linear infinite`;
        });
    </script>
</head>

<body>
    <div class="container">
        <div class="marquee-animation">
            <img id="mugiko" src="https://mugiko.moe/mugiko.jpg" alt="lovely mugiko">
        </div>
    </div>
</body>

</html>
	<!DOCTYPE html>
	<html lang="ja">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>麦子.moe</title>

	<style>
	.container {
	width: 100%;
	height: 100%;
	max-height: 500px;
	}

	.marquee-animation {
	overflow: hidden;
	}

	.marquee-animation>img {
	animation: marquee 30s linear infinite, updown 1.5s linear infinite;
	padding-left: 100%;
	}

	/* 横移動 */
	@keyframes marquee {
	from {
	transform: translate(0);
	}

	to {
	transform: translate(-100%);
	}
	}

	/* 縦方向のふよふよ */
	@keyframes updown {
	from {
	margin-top: 50px;
	}

	50% {
	margin-top: 0;
	}

	to {
	margin-top: 50px;
	}
	}
	</style>

	<script>
	window.addEventListener('resize', function () {
	// mugiko must be present
	var target = document.getElementById('mugiko');

	// 横幅1920pxの時に30sで調整したので、それを元に横幅に応じてアニメーションの速度を変える
	var duration = 30 * (window.innerWidth / 1920);
	target.style.animation = `marquee ${duration}s linear infinite, updown 1.5s linear infinite`;
	});
	</script>
	</head>

	<body>
	<div class="container">
	<div class="marquee-animation">
	<img id="mugiko" src="https://mugiko.moe/mugiko.jpg" alt="lovely mugiko">
	</div>
	</div>
	</body>

	</html>