Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@RS0823inStedTechOrganization

意味不明な作品

Last updated at Posted at 2024-11-12

今回もくだらない作品を作りました。m(__)m

いかが全コードです

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>意味不明な作品</title>
    <style>
        /* 基本スタイル */
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #f0f8ff;
            font-family: 'Comic Sans MS', sans-serif;
            color: #ff6347;
            text-align: center;
        }

        h1 {
            font-size: 50px;
            animation: bounce 3s infinite;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
        }

        p {
            font-size: 20px;
            color: #4682b4;
            animation: blink 1s infinite;
        }

        .circle {
            position: absolute;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: #ff1493;
            animation: moveCircle 5s infinite linear;
        }

        .rainbow-text {
            font-size: 2em;
            background-image: linear-gradient(to left, red, orange, yellow, green, blue, indigo, violet);
            -webkit-background-clip: text;
            color: transparent;
            animation: textWave 4s infinite;
        }

        .floating-shape {
            position: absolute;
            width: 40px;
            height: 40px;
            background-color: #00bfff;
            border-radius: 50%;
            opacity: 0.7;
            animation: floatShapes 6s infinite;
        }

        @keyframes bounce {
            0%, 100% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-30px);
            }
        }

        @keyframes blink {
            0%, 50% {
                opacity: 1;
            }
            25%, 75% {
                opacity: 0;
            }
        }

        @keyframes moveCircle {
            0% {
                top: 0;
                left: 0;
            }
            25% {
                top: 90%;
                left: 90%;
            }
            50% {
                top: 0;
                left: 90%;
            }
            75% {
                top: 90%;
                left: 0;
            }
            100% {
                top: 0;
                left: 0;
            }
        }

        @keyframes textWave {
            0%, 100% {
                transform: translateX(0);
            }
            50% {
                transform: translateX(10px);
            }
        }

        @keyframes floatShapes {
            0% {
                top: -50px;
                left: -50px;
                transform: rotate(0deg);
            }
            25% {
                top: 90%;
                left: 50%;
                transform: rotate(90deg);
            }
            50% {
                top: 50%;
                left: 90%;
                transform: rotate(180deg);
            }
            75% {
                top: 10%;
                left: 30%;
                transform: rotate(270deg);
            }
            100% {
                top: 50%;
                left: 10%;
                transform: rotate(360deg);
            }
        }

        /* テキストの揺れ */
        .wobble {
            animation: wobble 1s ease-in-out infinite;
        }

        @keyframes wobble {
            0%, 100% {
                transform: rotate(0deg);
            }
            15% {
                transform: rotate(10deg);
            }
            30% {
                transform: rotate(-10deg);
            }
            45% {
                transform: rotate(5deg);
            }
            60% {
                transform: rotate(-5deg);
            }
            75% {
                transform: rotate(2deg);
            }
        }

        /* ランダムに生成されるテキストのスタイル */
        .random-text {
            position: absolute;
            font-size: 30px;
            font-weight: bold;
            color: rgba(255, 255, 255, 0.8);
            animation: textMove 10s infinite linear;
        }

        @keyframes textMove {
            0% {
                top: 0%;
                left: 0%;
                transform: rotate(0deg);
            }
            25% {
                top: 30%;
                left: 70%;
                transform: rotate(90deg);
            }
            50% {
                top: 80%;
                left: 50%;
                transform: rotate(180deg);
            }
            75% {
                top: 50%;
                left: 10%;
                transform: rotate(270deg);
            }
            100% {
                top: 0%;
                left: 0%;
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <h1>意味不明な作品へようこそ！</h1>
    <p>何が起こっているのか全くわからない...</p>
    <div class="circle"></div>
    <p class="rainbow-text">これは不必要にカラフルなテキストです。</p>
    <p class="wobble">なんでこんなことしてるんだろう...</p>

    <script>
        // ランダムに浮遊する円を生成
        setInterval(function() {
            let randomCircle = document.createElement('div');
            randomCircle.classList.add('floating-shape');
            randomCircle.style.top = `${Math.random() * window.innerHeight}px`;
            randomCircle.style.left = `${Math.random() * window.innerWidth}px`;
            document.body.appendChild(randomCircle);
        }, 1000);

        // ランダムなテキストをランダムな位置に追加
        const randomWords = ["不明", "意味なし", "無駄", "無意味", "空間", "無限", "エラー", "反復"];
        setInterval(function() {
            let randomText = document.createElement('div');
            randomText.classList.add('random-text');
            randomText.innerText = randomWords[Math.floor(Math.random() * randomWords.length)];
            randomText.style.top = `${Math.random() * window.innerHeight}px`;
            randomText.style.left = `${Math.random() * window.innerWidth}px`;
            document.body.appendChild(randomText);
        }, 2000);

        // 背景色とランダムな要素を動かす
        setInterval(function() {
            document.body.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 80%)`;
        }, 2500);

        // 無駄にスライドするテキストを追加
        setInterval(function() {
            let randomSlideText = document.createElement('div');
            randomSlideText.classList.add('random-text');
            randomSlideText.innerText = "わからないけど動かしてみる！";
            randomSlideText.style.top = `${Math.random() * window.innerHeight}px`;
            randomSlideText.style.left = `${Math.random() * window.innerWidth}px`;
            randomSlideText.style.fontSize = `${Math.random() * 40 + 20}px`;
            randomSlideText.style.fontWeight = "bold";
            randomSlideText.style.color = `hsl(${Math.random() * 360}, 100%, 60%)`;
            randomSlideText.style.animation = "textMove 10s infinite linear";
            document.body.appendChild(randomSlideText);
        }, 3000);
    </script>
</body>
</html>

今回の作品を説明していこうと思います[。

<head> セクション

  • メタデータとタイトル:

    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>意味不明な作品</title>
    • charset="UTF-8" は文字エンコーディングを指定しています。
    • viewport タグはレスポンシブデザインをサポートし、モバイルデバイスでも適切に表示されるようにします。
    • <title> タグはページのタイトルを定義します。

  • CSSスタイル:
    <style> タグ内で、ページのデザインを定義しています。多くのアニメーションやビジュアル効果が含まれています。

CSS セクション

  1. 基本スタイル:

    body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #f0f8ff;
    font-family: 'Comic Sans MS', sans-serif;
    color: #ff6347;
    text-align: center;
}
    • ページ全体の余白 (margin, padding) をゼロに設定し、スクロールバーを隠す (overflow: hidden) ことで、背景がページいっぱいに広がります。
    • 背景色 (#f0f8ff) と文字色 (#ff6347) を設定し、フォントに「Comic Sans MS」を使用しています。

  2. 見出し（h1）:

    h1 {
    font-size: 50px;
    animation: bounce 3s infinite;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
    • 見出し (<h1>) のフォントサイズを 50px に設定し、「バウンス」アニメーションを 3秒ごとに繰り返し実行します。
    • テキストに軽い影 (text-shadow) を加えています。

  3. 段落（p）:

    p {
    font-size: 20px;
    color: #4682b4;
    animation: blink 1s infinite;
}
    • 段落のフォントサイズを 20px に設定し、青色のテキスト (#4682b4) にします。
    • 1秒ごとにテキストが点滅する「ブリンク」アニメーションを適用しています。

  4. 円形の要素（circle）:

    .circle {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #ff1493;
    animation: moveCircle 5s infinite linear;
}
    • 赤紫色の円形 (border-radius: 50%) を作成し、5秒で移動する「移動する円」アニメーションを適用します。

  5. 虹色のテキスト（rainbow-text）:

    .rainbow-text {
    font-size: 2em;
    background-image: linear-gradient(to left, red, orange, yellow, green, blue, indigo, violet);
    -webkit-background-clip: text;
    color: transparent;
    animation: textWave 4s infinite;
}
    • 虹色の背景グラデーションをテキストに適用し、テキストの色を透明 (color: transparent) に設定して、背景を「切り抜く」効果を得ます。
    • 4秒で揺れる「テキスト波動」アニメーションを設定しています。

  6. 浮遊する形（floating-shape）:

    .floating-shape {
    position: absolute;
    width: 40px;
    height: 40px;
    background-color: #00bfff;
    border-radius: 50%;
    opacity: 0.7;
    animation: floatShapes 6s infinite;
}
    • 青い円形が画面上を浮遊し、6秒ごとに異なる位置に移動する「浮遊する形」アニメーションを設定します。

  7. テキストの揺れ（wobble）:

    .wobble {
    animation: wobble 1s ease-in-out infinite;
}
    • このクラスは、テキストを1秒間隔で左右に揺れるアニメーションを適用します。

  8. ランダムなテキスト（random-text）:

    .random-text {
    position: absolute;
    font-size: 30px;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.8);
    animation: textMove 10s infinite linear;
}
    • ランダムな位置に表示されるテキストで、10秒間にわたり回転しながら移動する「テキスト移動」アニメーションが適用されます。

JavaScript セクション

  1. ランダムに浮遊する円を生成:

    setInterval(function() {
    let randomCircle = document.createElement('div');
    randomCircle.classList.add('floating-shape');
    randomCircle.style.top = `${Math.random() * window.innerHeight}px`;
    randomCircle.style.left = `${Math.random() * window.innerWidth}px`;
    document.body.appendChild(randomCircle);
}, 1000);
    • 1秒ごとにランダムな位置で円形の要素を生成し、ページに追加します。

  2. ランダムなテキストを追加:

    const randomWords = ["不明", "意味なし", "無駄", "無意味", "空間", "無限", "エラー", "反復"];
setInterval(function() {
    let randomText = document.createElement('div');
    randomText.classList.add('random-text');
    randomText.innerText = randomWords[Math.floor(Math.random() * randomWords.length)];
    randomText.style.top = `${Math.random() * window.innerHeight}px`;
    randomText.style.left = `${Math.random() * window.innerWidth}px`;
    document.body.appendChild(randomText);
}, 2000);
    • 2秒ごとに、ランダムな言葉（例えば「無意味」や「エラー」）をランダムな位置に表示するテキスト要素を生成します。

  3. 背景色の変更:

    setInterval(function() {
    document.body.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 80%)`;
}, 2500);
    • 2.5秒ごとに、ページの背景色をランダムに変更します。

  4. 無駄にスライドするテキストを追加:

    setInterval(function() {
    let randomSlideText = document.createElement('div');
    randomSlideText.classList.add('random-text');
    randomSlideText.innerText = "わからないけど動かしてみる！";
    randomSlideText.style.top = `${Math.random() * window.innerHeight}px`;
    randomSlideText.style.left = `${Math.random() * window.innerWidth}px`;
    randomSlideText.style.fontSize = `${Math.random() * 40 + 20}px`;
    randomSlideText.style.fontWeight = "bold";
    randomSlideText.style.color = `hsl(${Math.random() * 360}, 100%, 60%)`;
    randomSlideText.style.animation = "textMove 10s infinite linear";
    document.body.appendChild(randomSlideText);
}, 3000);
    • 3秒ごとに「わからないけど動かしてみる！」というテキストを追加し、そのテキストがランダムに動き回ります。

総まとめ

このページは、動き回る円、ランダムに表示されるテキスト、色が変わる背景などを使用して、視覚的に非常に混乱した、意味不明な効果を生み出しています。すべてのアニメーションとランダムな要素が「不必要にカラフル」かつ「無意味」であることをテーマにしており、視覚的なインパクトが大きいです。

今回も意味がわからない作品に突き合わせてすません。ですが勉強になるところもあると思います。m(__)m

0
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?