昨日、トップページに左右にスライドする動的なバナー広告のようなものを設置しました。これは広告ではなく自分で作ったゲームが表示されるgif画像を右側に移動させるだけのものです。クリックするとゲームのページに飛ぶことができます。
どうやればできるのでしょうか？
ページ上にスライドする広告を表示させる矩形を用意して、タイマーでバナーの表示位置を変えるのであれば比較的簡単に実装できそうです。
永久にスライドし続けるのは得策ではない
まずは失敗例です。
鳩は休むなく移動しているので、これを見ていると気分が悪くなってしまいます。やるのであれば、ときどき動かすようにすべきです。
一応、作ったのでHTMLとJavaScriptがどうなっているのかを示します。
これは以前のヘッダー画像を表示させていた部分です。画像は鳩が3羽並んでいるだけのシンプルなものです。
|
1 2 3 4 5 6 |
<!-- このブログではこの部分にヘッドバナーが表示される --> <div class="main-image"> <div class="main-image-in"> <img class="header-image" src="hato3.png" alt="image" /> </div> <!-- /.main-image-in --> </div> <!-- /.main-image --> |
これを以下のように書き換えます。鳩の画像をいくつか並べて左に移動させます。はるか右に移動したものは左に移動させて、エンドレスで鳩が移動しているように見せかけます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<div class="main-image"> <style> .main-image-in { background-color:#fff; height:230px; position: relative; overflow: hidden; } .hato { width:330px; } </style> <div class="main-image-in"> <div class = "image"><img src="hato.png" alt="image" class="hato" id = "head-hato0" /><div> <div class = "image"><img src="hato.png" alt="image" class="hato" id = "head-hato1" /><div> <div class = "image"><img src="hato.png" alt="image" class="hato" id = "head-hato2" /><div> <div class = "image"><img src="hato.png" alt="image" class="hato" id = "head-hato3" /><div> <div class = "image"><img src="hato.png" alt="image" class="hato" id = "head-hato4" /><div> <script> (function(){ let hatos = []; let hato_len = 5; for(let i=0; i < hato_len; i++){ let hato = document.getElementById(`head-hato` + i); hato.style.position = "absolute"; hatos.push(hato); } let moveX = 0; let arr = [0, 350, 700,1050,1400]; setInterval(() => { moveX += 8; for(let i = 0; i < hato_len; i++){ hatos[i].style.marginLeft = (moveX + arr[i]) % 1750 - 350 + "px"; } }, 33); })(); </script> </div> <!-- /.main-image-in --> </div> <!-- /.main-image --> |
これだと鳩が動き続けるので、訪問者にとってはちょっとウザいのではないでしょうか？
少し時間をあけてスライドさせる
そこで途中で止めます。
最初は静止状態にしておき、1．5秒後に最初の移動を開始します。それ以降は5～8秒おきに移動させるようにします。これならそんなにうっとうしく思われずにすみそうです。
JavaScript部分を修正します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<script> (function(){ let hatos = []; let hato_len = 5; for(let i=0; i < hato_len; i++){ let hato = document.getElementById(`head-hato` + i); hato.style.position = "absolute"; hatos.push(hato); } let moveX = 0; let moveX0 = 0; let arr = [0, 350, 700,1050,1400]; // 画像を適切な初期座標に配置する for(let i = 0; i < hato_len; i++){ hatos[i].style.marginLeft = (moveX + arr[i]) % 1750 - 350 + "px"; } // 1．5秒後に移動開始 // それ以降は5秒おきに移動する setTimeout(() => { Move(); setInterval(() => { Move(); }, 5 * 1000); }, 1500); function Move() { let count = 0; let id = setInterval(() => { if(moveX0 >= 350) { clearInterval(id); moveX0 = 0; return; } moveX += 10; moveX0 += 10; count++; for(let i = 0; i < hato_len; i++){ hatos[i].style.marginLeft = (moveX + arr[i]) % 1750 - 350 + "px"; } }, 33); } })(); </script> |
これならそんなに鬱陶しくないし、鳩の画像の部分にこれまで作成したゲームのgif画像とリンクをいれればゲーム好きの訪問者ではればクリックしてくれるかもしれません。
ヘッダー画像がクリックされたら
もし画像をクリックしたら他のページに飛べるようにするにはHTMLタグを以下のように変更すればOKです。
|
1 2 3 4 5 |
（変更前） <div class = "image"><img src="hato.png" alt="image" class="hato" id = "head-hato0" /><div> （変更後） <div class = "image"><a href="リンク先のページ"><img src="gif画像のurl" /></a></div> |
これでページがにぎやかになります。あまりにぎやかにしすぎるとページが表示されるのに時間がかかったり、売り込み色が強い嫌なページになってしまうかもしれませんが・・・（物は加減です。過ぎたるは及ばざるごとし）。
あとクリックしてくれアピールが強すぎるボタンも考え物です。
