左右にスライドする動的なバナー広告のようなものを作りたい

昨日、トップページに左右にスライドする動的なバナー広告のようなものを設置しました。これは広告ではなく自分で作ったゲームが表示されるgif画像を右側に移動させるだけのものです。クリックするとゲームのページに飛ぶことができます。

トップページをリニューアルした鳩でもわかるC#

どうやればできるのでしょうか？

ページ上にスライドする広告を表示させる矩形を用意して、タイマーでバナーの表示位置を変えるのであれば比較的簡単に実装できそうです。

Contents

1 永久にスライドし続けるのは得策ではない
2 少し時間をあけてスライドさせる
- 2.1 ヘッダー画像がクリックされたら

永久にスライドし続けるのは得策ではない

まずは失敗例です。

失敗作の動作確認はこちらから

鳩は休むなく移動しているので、これを見ていると気分が悪くなってしまいます。やるのであれば、ときどき動かすようにすべきです。

一応、作ったのでHTMLとJavaScriptがどうなっているのかを示します。

これは以前のヘッダー画像を表示させていた部分です。画像は鳩が3羽並んでいるだけのシンプルなものです。

<!-- このブログではこの部分にヘッドバナーが表示される -->
<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 -->

</div>

</div>

これを以下のように書き換えます。鳩の画像をいくつか並べて左に移動させます。はるか右に移動したものは左に移動させて、エンドレスで鳩が移動しているように見せかけます。

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

<style>

.main-image-in {

background-color:#fff;

height:230px;

position: relative;

overflow: hidden;

}

.hato {

width:330px;

}

</style>

(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>

</div>

これだと鳩が動き続けるので、訪問者にとってはちょっとウザいのではないでしょうか？

少し時間をあけてスライドさせる

そこで途中で止めます。

最初は静止状態にしておき、1．5秒後に最初の移動を開始します。それ以降は5～8秒おきに移動させるようにします。これならそんなにうっとうしく思われずにすみそうです。

JavaScript部分を修正します。

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

(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です。

（変更前）
<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>

（変更前）

（変更後）

これでページがにぎやかになります。あまりにぎやかにしすぎるとページが表示されるのに時間がかかったり、売り込み色が強い嫌なページになってしまうかもしれませんが・・・（物は加減です。過ぎたるは及ばざるごとし）。

あとクリックしてくれアピールが強すぎるボタンも考え物です。

ウザすぎる反面教師にすべき例

左右にスライドする動的なバナー広告のようなものを作りたい

永久にスライドし続けるのは得策ではない

少し時間をあけてスライドさせる

ヘッダー画像がクリックされたら

鳩でも分かるC#管理人からのお願い

コメントについて

管理人のモチベーションアップのために

コメントをどうぞ