Go to Qiita Advent Calendar 2024 Top
LoginSignup
4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Qiita全国学生対抗戦Advent Calendar 2024

Day 10
@RS0823inStedTechOrganization

無意味な作品

Posted at

了解！コードごとに簡潔に説明しますね。

1. 背景アニメーション 

body {
  background: linear-gradient(45deg, #ff007f, #800080, #ff4500, #32cd32, #1e90ff);
  background-size: 400% 400%;
  animation: gradientAnimation 10s ease infinite;
}
  • 目的: 背景が5つのカラフルな色を使って、斜めのグラデーションとしてアニメーションします。
  • 効果: 背景が時間と共に色を変化させる。

2. ボックスのアニメーション (バウンス) 

.container {
  animation: bounce 5s infinite alternate;
}
@keyframes bounce {
  0% { transform: scale(1); }
  100% { transform: scale(1.2); }
}
  • 目的: コンテナ内の要素が上下に「バウンス」するアニメーション。
  • 効果: ボックスが膨らんだり縮んだりして、動きが生まれます。

3. タイトルの色変化 (テキストパルス) 

h1 {
  animation: textPulse 2s infinite alternate;
}
@keyframes textPulse {
  0% { color: #ff6347; }
  100% { color: #32cd32; }
}
  • 目的: タイトルが色を変えるアニメーション。
  • 効果: タイトルの色がオレンジと緑に切り替わる。

4. 絵文字の回転 

.emoji {
  animation: emojiSpin 5s infinite linear;
}
@keyframes emojiSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
  • 目的: 絵文字が360度回転するアニメーション。
  • 効果: 絵文字がぐるぐる回る。

5. カラフルボタンのホバー 

.color-button:hover {
  transform: scale(1.2);
  background-color: #32cd32;
}
  • 目的: ボタンがホバー時に拡大し、背景色が変わる。
  • 効果: ボタンが大きくなり、色が緑に変わる。

6. 浮遊する円 

.circle {
  animation: floatCircle 3s infinite ease-in-out;
}
@keyframes floatCircle {
  0% { transform: translateY(0); }
  50% { transform: translateY(-50px); }
  100% { transform: translateY(0); }
}
  • 目的: 円が上下に浮遊するアニメーション。
  • 効果: 円が上下に揺れながら動く。

7. 隠されたテキストの表示 

setTimeout(() => {
  document.getElementById('hiddenText').style.display = 'block';
}, 5000);
  • 目的: 5秒後に隠されていたテキストを表示する。
  • 効果: 初めは見えないテキストが5秒後に現れる。

8. 絵文字のランダム変更 

setInterval(() => {
  const emojis = ['🌈', '💥', '🦄', '✨', '🔥', '🍭', '🎉', '👾', '🎨'];
  const randomEmoji = emojis[Math.floor(Math.random() * emojis.length)];
  document.querySelector('.emoji').textContent = randomEmoji;
}, 1000);
  • 目的: 1秒ごとに絵文字がランダムに変わる。
  • 効果: 絵文字が定期的に入れ替わる。

9. スクロールに応じたテキストの動き 

window.addEventListener('scroll', () => {
  const scrollY = window.scrollY;
  const highlightText = document.querySelector('.highlight-text');
  highlightText.style.transform = `translateY(${scrollY * 0.1}px)`;
});
  • 目的: ページをスクロールすると、テキストが上下に動く。
  • 効果: スクロールに合わせてテキストが動く。

10. カラフルボタンで背景色と円の色を変更 

function changeColors() {
  const colors = ['#ff6347', '#32cd32', '#ff1493', '#1e90ff', '#ff4500'];
  const randomColor = colors[Math.floor(Math.random() * colors.length)];
  document.body.style.backgroundColor = randomColor;
  document.querySelector('.container').style.boxShadow = `0 0 100px ${randomColor}`;
  document.querySelector('.circle:nth-child(1)').style.backgroundColor = randomColor;
  document.querySelector('.circle:nth-child(2)').style.backgroundColor = randomColor;
  document.querySelector('.circle:nth-child(3)').style.backgroundColor = randomColor;
}
  • 目的: ボタンをクリックすると、背景色と円の色がランダムに変わる。
  • 効果: 色がランダムに選ばれて、全体の雰囲気が変わる

全体のコードは以下

<!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;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: 'Arial', sans-serif;
      background: linear-gradient(45deg, #ff007f, #800080, #ff4500, #32cd32, #1e90ff);
      background-size: 400% 400%;
      animation: gradientAnimation 10s ease infinite;
      color: white;
    }

    /* 中央に配置された大きなボックス */
    .container {
      text-align: center;
      background-color: rgba(255, 255, 255, 0.1);
      padding: 60px;
      border-radius: 20px;
      box-shadow: 0 0 100px rgba(0, 255, 255, 0.5);
      animation: bounce 5s infinite alternate;
      transform-origin: center;
    }

    /* タイトル */
    h1 {
      font-size: 4em;
      text-transform: uppercase;
      color: #ff6347;
      text-shadow: 0 0 20px rgba(255, 255, 0, 0.8), 0 0 30px rgba(255, 0, 255, 0.7);
      animation: textPulse 2s infinite alternate;
      letter-spacing: 5px;
    }

    /* 説明文 */
    p {
      font-size: 1.8em;
      margin-top: 20px;
      animation: colorShift 3s infinite alternate;
      text-shadow: 2px 2px 10px rgba(255, 255, 255, 0.5), 0 0 15px rgba(0, 255, 255, 0.7);
    }

    /* 絵文字のブロック */
    .emoji {
      font-size: 4em;
      margin-top: 20px;
      animation: emojiSpin 5s infinite linear;
    }

    /* カラフルボタン */
    .color-button {
      background-color: #ff1493;
      color: white;
      font-size: 2em;
      border: none;
      padding: 20px 40px;
      border-radius: 50px;
      cursor: pointer;
      box-shadow: 0 0 15px rgba(255, 0, 255, 0.7);
      transition: transform 0.3s ease, background-color 0.3s ease;
    }

    .color-button:hover {
      transform: scale(1.2);
      background-color: #32cd32;
    }

    .hidden-text {
      display: none;
      font-size: 2em;
      color: #ff4500;
      text-shadow: 0 0 10px rgba(0, 255, 255, 0.7);
    }

    /* 無意味なアニメーション */
    @keyframes gradientAnimation {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }

    @keyframes bounce {
      0% {
        transform: scale(1);
      }
      100% {
        transform: scale(1.2);
      }
    }

    @keyframes textPulse {
      0% {
        color: #ff6347;
      }
      100% {
        color: #32cd32;
      }
    }

    @keyframes colorShift {
      0% {
        color: #ff6347;
      }
      50% {
        color: #32cd32;
      }
      100% {
        color: #ff1493;
      }
    }

    @keyframes emojiSpin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    /* 複数の動きのための要素 */
    .circle {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      background-color: #ff6347;
      position: absolute;
      animation: floatCircle 3s infinite ease-in-out;
      box-shadow: 0 0 30px rgba(255, 255, 0, 0.5);
    }

    .circle:nth-child(2) {
      background-color: #32cd32;
      animation-delay: 1s;
    }

    .circle:nth-child(3) {
      background-color: #1e90ff;
      animation-delay: 2s;
    }

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

    /* 無意味に強調されたテキスト */
    .highlight-text {
      font-size: 3em;
      color: #ff1493;
      text-shadow: 3px 3px 15px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 255, 0, 0.7);
      animation: blinkText 1s infinite alternate;
    }

    @keyframes blinkText {
      0% {
        opacity: 1;
      }
      100% {
        opacity: 0.3;
      }
    }
  </style>
</head>
<body>
  <!-- メインコンテンツ -->
  <div class="container">
    <h1>無意味でカラフルな世界へようこそ！</h1>
    <p>ここに意味はありません！👾</p>
    <div class="emoji">🌈💥🦄✨🔥🍭</div>
    <button class="color-button" onclick="changeColors()">カラフルボタン🎨</button>

    <div class="hidden-text" id="hiddenText">
      これは隠された無意味なテキストです...🔮
    </div>

    <div class="highlight-text">
      無意味なテキストが強調されています！🚀
    </div>
  </div>

  <!-- 画面上を浮遊する円 -->
  <div class="circle" style="top: 10%; left: 15%;"></div>
  <div class="circle" style="top: 30%; left: 50%;"></div>
  <div class="circle" style="top: 60%; left: 80%;"></div>

  <script>
    // カラフルボタンをクリックすると背景色とボックスシャドウが変わる
    function changeColors() {
      const colors = ['#ff6347', '#32cd32', '#ff1493', '#1e90ff', '#ff4500'];
      const randomColor = colors[Math.floor(Math.random() * colors.length)];
      document.body.style.backgroundColor = randomColor;
      document.querySelector('.container').style.boxShadow = `0 0 100px ${randomColor}`;
      document.querySelector('.circle:nth-child(1)').style.backgroundColor = randomColor;
      document.querySelector('.circle:nth-child(2)').style.backgroundColor = randomColor;
      document.querySelector('.circle:nth-child(3)').style.backgroundColor = randomColor;
    }

    // 隠されたテキストを表示
    setTimeout(() => {
      document.getElementById('hiddenText').style.display = 'block';
    }, 5000);

    // 絵文字を無意味にランダムに変更
    setInterval(() => {
      const emojis = ['🌈', '💥', '🦄', '✨', '🔥', '🍭', '🎉', '👾', '🎨'];
      const randomEmoji = emojis[Math.floor(Math.random() * emojis.length)];
      document.querySelector('.emoji').textContent = randomEmoji;
    }, 1000);

    // ページのスクロールに合わせてテキストが動く
    window.addEventListener('scroll', () => {
      const scrollY = window.scrollY;
      const highlightText = document.querySelector('.highlight-text');
      highlightText.style.transform = `translateY(${scrollY * 0.1}px)`;
    });
  </script>
</body>
</html>

以上です。

4
2
2

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
4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?