🗾
以下が実装例になります。安全性を考慮した実装となっています。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>さすが福島</title>
<style>
#container {
position: relative;
width: 100%;
height: 100vh;
background: #FFF9C4;
overflow: hidden;
}
#flag {
position: absolute;
top: 0;
left: 100%;
white-space: nowrap;
font-size: 50px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="container">
<div id="flag">🗾</div>
</div>
<script>
let flagElement = document.getElementById('flag');
// 福島旗の横幅
let flagWidth = flagElement.offsetWidth;
// X方向の移動距離
let moveDistance = -flagWidth - 10; // 画面外まで移動したときにマージンを加算するために10px分余分に移動
// 福島旗を右から左へアニメーションする
function animateFlag() {
// フラグのX座標を取得
let flagX = flagElement.getBoundingClientRect().x;
if (flagX > -flagWidth) {
// フラグを移動
flagElement.style.left = flagX - 5 + 'px'; // 5pxずつ移動する
requestAnimationFrame(animateFlag); // 再帰的にアニメーションを繰り返す
} else {
// フラグが画面外に出たらマージンを加算して戻す
flagElement.style.left = '100%';
setTimeout(animateFlag, 3000); // 3秒後に再度アニメーションを開始
}
}
animateFlag();
// 福島ジョーク
function showMessage() {
alert('さすが福島');
}
// クリックしたらメッセージを表示
flagElement.addEventListener('click', showMessage);
</script>
</body>
</html>
```
福島旗の記号を右から左へアニメーションさせ、クリックしたら「さすが福島」と表示されるようになっています。ウィンドウサイズに合わせて、画面いっぱいに表示されるようになっています。また、`eval` や他のサイトへの遷移、リダイレクトなどの危険な機能は使用していません。