奇 | zip358.com

クリスマスなのでブラウザに雪を降らすJSコードを生成AIで生成.

2024.12.25

おはようございます．クリスマスなのでブラウザに雪を降らすJSコードを生成AIで生成.今年も彼女がいないクリスマスを過ごしました.彼女になってくれる人お待ちしております、この姿勢が彼女が出来ない要素なんだということも分かっていますが.

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>雪</title>
    <style>
        #snowContainer {
            position: absolute;
            /* 親要素に対する絶対配置 */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            /* 雪が画面外に出ないようにする */
            pointer-events: none;
            /* 雪がマウスイベントを邪魔しないようにする */
            z-index: 9999;
            /* 他の要素より前面に表示 */
        }

        .snowflake {
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: white;
            border-radius: 50%;
            /* 丸くする */
            opacity: 0.7;
            /* 少し透明にする */
            animation: snowfall linear infinite;
            /* アニメーションを指定 */
        }

        @keyframes snowfall {
            0% {
                transform: translateY(-10px);
            }

            /* 開始位置 */
            100% {
                transform: translateY(100vh);
            }

            /* 終了位置（画面下部） */
        }
        html{
            background-color: black;
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>
<body>
    <div id="snowContainer"></div>
    <script>
        const snowContainer = document.getElementById('snowContainer');
        const numSnowflakes = 50; // 雪片の数

        for (let i = 0; i < numSnowflakes; i++) {
            const snowflake = document.createElement('div');
            snowflake.classList.add('snowflake');
            snowflake.style.left = `${Math.random() * 100}vw`; // 横方向のランダムな位置
            snowflake.style.animationDuration = `${Math.random() * 3 + 2}s`; // アニメーション速度をランダムに
            snowflake.style.animationDelay = `${Math.random()}s`; // アニメーション開始時間をランダムに
            snowflake.style.fontSize = `${Math.random() * 10 + 5}px`;
            snowContainer.appendChild(snowflake);
        }
    </script>
</body>
</html>

そんな自分でも好きですという奇特な人はいないものかな…(受け身（笑）

そんな自分が生成AIに雪を降らすJSコードを頼んだところ、俊足の解を出してくれました.なんて時代なんだと思いながら出力されたコードをhtmlファイルにペーストしてhtml背景を黒にしてあとは一応、確認.

最後に雪が降っているデモサイトを貼っときます.

https://zip358.com/tool/snow

明日へ続く

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2024年12月25 06:00日

タグ

```, アニメーション, アニメーション速度, クリスマス, マウスイベント, ランダム, 俊足, 前面, 奇, 姿勢, 最後, 生成, 生成今年, 画面下部, 背景, 要素, 親要素, 解, 配置, 雪片,