WEBシステム

WEBサイトの上から画像を降らし、クリックで消去するシステム


こんにちは、プログラマーの山本です。

今回は企業さんからのご依頼で、

・WEBサイトの上から指定の画像10枚をランダムに降らし
 その画像をクリックした時に画像を削除する。

・さらに画像クリック時に、ランダムに5種類の音を鳴らす。

というシステムを制作しました。

同じようなシステムを開発したい方は参考にしてください。

コピペで同じシステムを導入できるようにしておきます。

画像の準備

今回は10枚の画像を用意しました。

扱いやすくするため、名前は「1.png」〜「10.png」にして、
全て同じディレクトリに入れます。

降らす画像の指定に、この番号を使用します。

 

【HTML】再生する音声のリストを書く。

htmlで音声を設置しておきます。

<div class="sound hidden" id="sound_wrapper">
  <audio id="audio1" src="url.mp3" preload="auto"></audio>
  <audio id="audio2" src="url.mp3" preload="auto"></audio>
  <audio id="audio3" src="url.mp3" preload="auto"></audio>
  <audio id="audio4" src="url.mp3" preload="auto"></audio>
  <audio id="audio5" src="url.mp3" preload="auto"></audio>
</div>

url.mp3 のところは、各音声のURLに変更しましょう。

 

【JavaScript】画像を降らせるシステムのコードを書く。

jQueryを使うので、jQueryファイルを読み込んでおきます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">

いよいよシステムのメインとなるjsコードを書いていきます。

$(function(){
  const img_directory = '画像のディレクトリURL';
  const img_cnt = 10; //画像の種類
  const audio_cnt = 5; //音声の種類
  const interval_mili = 1000; //画像を降らせる間隔
  $('body').css('overflow-x' ,'hidden');
  let window_width, window_height;
  function resize(){
    window_width = $(window).width();
    window_height = $(window).height();
  }
  $(window).on('resize' , resize);
  resize();
  //実行
  setInterval(loop, interval_mili);
  function loop(){
    const random_no = Math.floor( Math.random() * (img_cnt - 1) ) + 1;
    $('<img>')
    .appendTo('body')
    .attr('src' , img_directory+ random_no +'.png')
    .addClass('img')
    .css({
      'display' : 'none',
      'position' : 'fixed',
      'z-index' : '50'
    })
    .load(function(){
      $(this).click(function(){
        //画像クリック時の動作
        const random = Math.floor( Math.random() * (audio_cnt - 1) ) + 1;
        $('#audio'+random).get(0).currentTime = 0; //リセット
        $('#audio'+random).get(0).play(); //音を鳴らす
        $(this).remove(); //画像削除
      });
    }
  }
});

軽く補足説明をしておきます。

【状況に応じて変更する箇所】
2行目:画像を入れているディレクトリのURLを記入してください。
3行目:画像の種類を指定してください。
4行目:音声の種類を指定してください。
5行目:画像を降らせる間隔を指定してください。1秒=1000です。

6~13行目:ウィンドウサイズ内から画像が降るように調整しています。

15行目:指定した間隔ごとに画像を降らせるコードを繰り返し実行しています。

17行目:1~10(画像の種類)までの数値をランダムで出力します。

18~27行目:ランダムに画像を上から降らします。

30行目:1~8(音声の種類)までの数値をランダムで出力します。

 

まとめ

以上で、上から画像をランダムに降らし、
クリックした時に画像を消してランダムに音を鳴らすことができます。

画像や音声の数が増えても、
一部を修正するだけで対応できるようになっています。

制作の依頼はこちら

今回ご紹介したシステムなど、
WEB上に何らかのシステムを実装したい場合は弊社におまかせください。

1件につき¥3,000(税別)から承ります。

格安での対応が可能ですので、
以下のフォームから相談内容を明記の上、お気軽にご相談いただければと思います。

必須 お名前
必須 メールアドレス
任意 サイトのURL
必須 ご依頼内容や相談内容

※出来るだけ具体的に記載していただけると進行がスムーズになります。
任意 画像やPDF

※必要があれば添付してください。




原則1営業日以内に、お見積りと決済リンクのご案内を送らさせていただきます。

  • この記事を書いた人
  • 最新記事
Yamamoto

Yamamoto

JavaScript、PHPをメインで扱うWEBプログラマー。Wordpressを主としたWEBサイトにシステムを導入する仕事を多くこなしてきた。 自身のブログを月間20万PVに導いた実績をもち、サイトやブログの集客・運営も手がける。

-WEBシステム

© 2020 Web(ウェブ)の便利屋Lallapallooza(ララパルーザ)