画像のランダムな位置に☆のエフェクトを設定

2021・06・10

＊画像に☆マークのエフェクトがランダムな位置に現れます＊

今回は、☆マークのpositionプロパティの値にJavaScriptで生成したランダムな数値を代入することにより、不規則な位置に☆が現れては消えるというエフェクトを作ってみました。

サンプルでは☆の出現位置は完全にランダムですが、計算式を工夫することで「特定のエリアに絞って、その範囲内でランダムに出現させる」ということも可能です。

主な使用機能：CSS・JavaScript

上記のサンプルコードを掲載しています。学習用としてご自由にコピペしてお使い下さい。（※スクロールできます）

HTML・CSS・JavaScript

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
    <title></title>
    <style>
      .sample_imgBox {
        width: 80%;
        max-width: 500px;
        margin: 2rem auto;
        position: relative;
      }
      .sampleimg001 {
        border-radius: 20px;
        width: 100%;
        filter: brightness(1.1) opacity(.8);
      }
      .sample_effect {
        width: 10%;
        height: 10%;
        position: absolute;
        z-index: 10;
        top: 0;
        left: 0;
        background-color: gold;
        opacity: 0;
        clip-path: polygon(50% 2.4%, 34.5% 33.8%, 0% 38.8%, 25% 63.1%, 19.1% 97.6%, 50% 81.3%, 80.9% 97.6%, 75% 63.1%, 100% 38.8%, 65.5% 33.8%);
      }
      .sample_effect.sample_animationOn{
        animation: kirakira 500ms ease 0s 1 normal forwards;
      }
      @keyframes kirakira {
        0% {transform: scale(0) rotate(0); opacity: 0; }
        50% {transform: scale(.5) rotate(45deg); opacity: .3;}
        100% {transform: scale(1) rotate(90deg); opacity: .6;}
      }
    </style>
  </head>
  <body>
    <div class="sample_imgBox">
      <div class="sample_effect"></div>
      <div class="sample_effect" style="background-color: pink"></div>
      <div class="sample_effect" style="background-color: skyblue;"></div>
      <div class="sample_effect" style="background-color: violet;"></div>
      <div class="sample_effect" style="background-color: yellowgreen;"></div>
      <div class="sample_effect" style="background-color: silver;"></div>
      <img class="sampleimg001" src="https://web-de-asobo.net/wp-content/uploads/2021/06/webimg.jpg" alt="">
    </div>

    <script type="text/javascript" defer>
      {
        const sampleEffects = document.querySelectorAll('.sample_effect');

        setInterval( () => {
          for (var sampleEffect of sampleEffects) {
            const randomTop = Math.floor(Math.random() * 90);
            const randomLeft = Math.floor(Math.random() * 90);
            sampleEffect.style.top = `${randomTop}%`;
            sampleEffect.style.left = `${randomLeft}%`;
            sampleEffect.classList.toggle('sample_animationOn');
          }
        },900);
      }
    </script>
  </body>
</html>

« 前の記事へ次の記事へ »