QA@IT

JavaScriptスプラッシュの作成の疑問点

7340 PV

お世話になっております。

今回はスプラッシュを作成しておりまして・・・。
スプラッシュ自体はやっていない事もあってか情報が少なくて四苦八苦しております。

HTML側は

    <div id="opening">
        <div id="opTitle">
            <div id="opbg"><img src="images/opBg.jpg" width="437" height="253" alt="" /></div>
            <div id="loadImg"><img src="images/ajax-loader.gif" width="32" height="32" alt="" /></div>
        </div>
        <div id="opItem">
        </div>
        <div id="btnSkip"><img src="images/btn_skip.png" width="54" height="20" alt="" class="over" /></div>
    <div id="mask"></div>
    </div>

#maskのcss

   position:absolute;
   left:0; top:0;
   width: 100%;
   height: 100%;
   z-index:9000;
   background-color:#fff;
   opacity: 0.7;

問題のJS

function setItem(){ 
    var opItem = $('#opItem');
    for(var i = 0; i < 4; i++) {
        op_item = '';
        if(i === 0){
            op_item += '<div id="op_item' + i + '" class="opNum"><span></span></div>';
        }else{
            op_item += '<div id="op_item' + i + '" class="opNum"><span class="openingImage"><img src="images/opening' + i + '.jpg" width="990" height="379" alt="" /></span></div>';
        }
        opItem.append(op_item);
    }
}

function opStart(){
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();
    opNumMax = $('.opNum').size();
        $('#loadImg').delay(200).fadeOut(500,'easeInOutQuart',function(){
        $('#opbg').delay(200).animate({opacity:1},1500,'easeInOutQuart',function(){
            opNext();   
        });
        $('#btnSkip').delay(200).fadeIn(600,function(){
        });
        $('#mask').css({'width':maskWidth,'height':maskHeight});
    /* フェード効果を付ける */
    //transition effect
      $('#mask').fadeIn(500);
      $('#mask').fadeTo("slow",0.8);
      });
}

function opNext(){
    $('#opbg').delay(0).fadeOut(1200,'easeInOutQuart',function(){});    
    $('#opItem').delay(0).fadeIn(1000,'easeInOutQuart',function(){
        opItem(1, 0);
    });
}

function opItem(num,time){
    console.log("opItem");
    if(doSkip) return false;

    if(num!=0){
        var prevItem = $('#op_item' + num - 1);
    }
    var nextItem = $('#op_item' + num);
    num++;

    var easeTime = 1550;
    nextItem.children('span').children('img').delay(time).fadeIn(easeTime, 'easeInOutSine', function () {
            if (num != opNumMax) {
                prevItem.css('display', 'none');
                opItem(num, 5000);
            } else {
                setTimeout(function() {
                    opContents();
                }, 500);
            }
    });
}

function opContents(){
    $('#opening').delay(500).fadeOut(800,'easeInOutQuart',function(){});
    $('#contentArea').delay(900).fadeIn(0,'easeInOutQuart');
}

としてまして、画面がロードされてからホームページにはマスクがかかっていて、ページトップで画像が三枚フェードインフェードアウトした後にマスクが外れてHPが閲覧できるという内容です。

現在では画像が3枚並んでHPの上側に表示されてしまい、時間が経つと消えてくれるのですが・・。 
マスクが効いていないのと、画像のフェードインフェードアウトが効いていない状態です。
マスクはCSSが原因の可能性が高いので、何とかなりそうなのですが、フェードイン、フェードアウトはどうにも・・・。

すいませんが、よろしくお願い致します。

回答

使っているjavascriptフレームワークとそのバージョンがわかりません jQueryでしょうか?
javascriptが起動時にどのように実行しているのかわかりません。

マスクはされているように見えますが効いていないと判断されたのはなぜでしょう。

javascriptに全角スペースが含まれていますね。
とりあえず提示のソースでは以下の様な状態になります(全角スペースは削除しました)。

http://jsfiddle.net/n2z825t4/1/

setItem();
opStart();

を試しに呼び出してみましたが、jsエラーが発生しています。内容的にはパラメータ指定のエラーみたいですが、javascriptコンソールを開いてエラーを追うといいかもしれません。

編集 履歴 (0)

flied_onion さん、熱心に本当にありがとう御座いました。

返信が遅くなり申し訳ないです。矢継ぎの様に仕事をこなしていてこのページの事を忘れるぐらい仕事していました・・。

おかげさまでJSについてもだいぶ解ってきました。もう少し質問させてもらうかもしれませんが・・。よろしくお願い致します。

編集 履歴 (0)

お世話になっております、JSは最近勉強を初めて短期集中で身につけたため、用語などがよくわからないので申し訳ないのですが、

var browser = '';

var isClicked = false;
var doSkip = false;

var opNumMax = 0;
var debug = false;

/**/

var prevID = 0;
var nextID = 0;

var autoTimer = true;

$(document).ready( function() {
    init();
});

function init(){    
    browser = getUA();

    // $('.over').opOver();

    setItem();
    setEvent();

    $(window).load(function(){
        if(debug){
            opContents();
            return false;
        }
        opStart();
    });

};

function setItem(){ 
    var opItem = $('#opItem');
    for(var i = 0; i < 4; i++) {
        op_item = '';
        if(i === 0){
            op_item += '<div id="op_item' + i + '" class="opNum"><span></span></div>';
        }else{
            op_item += '<div id="op_item' + i + '" class="opNum"><span class="openingImage"><img src="images/opening' + i + '.jpg" width="990" height="379" alt="" /></span></div>';
        }
        opItem.append(op_item);
    }
}

function opStart(){
    opNumMax = $('.opNum').size();
    $('#loadImg').delay(200).fadeOut(500,'easeInOutQuart',function(){
        $('#opbg').delay(200).animate({opacity:1},500,'easeInOutQuart',function(){
            opNext();   
        });
        $('#btnSkip').delay(200).fadeIn(600,function(){
        });
    });
}

function opNext(){
    $('#opbg').delay(0).fadeOut(1200,'easeInOutQuart',function(){});    
    $('#opItem').delay(0).fadeIn(1000,'easeInOutQuart',function(){
        opItem(1, 0);
    });
}

function opItem(num,time){
    console.log("opItem");
    if(doSkip) return false;

    if(num!=0){
        var prevItem = $('#op_item' + num - 1);
    }
    var nextItem = $('#op_item' + num);
    num++;

    var easeTime = 1550;
    nextItem.children('span').children('img').delay(time).fadeIn(easeTime, 'easeInOutSine', function () {
            if (num != opNumMax) {
                prevItem.css('display', 'none');
                opItem(num, 2000);
            } else {
                setTimeout(function() {
                    opContents();
                }, 500);
            }
    });
}

function opContents(){
    $('#opening').delay(500).fadeOut(800,'easeInOutQuart',function(){});
    $('#contentArea').delay(900).fadeIn(0,'easeInOutQuart');
}

function setEvent(){
    $('#btnSkip').click(function(){
        doSkip = true;
        opContents();
    });
}

と行った関数で書いています。

ちなみに、画像3枚を変更して1枚のみフェードインでその後遅れて2枚目が重なるという仕様に現在変更中です。

編集 履歴 (1)
  • この jsですべてであれば、getUAという関数がないのでエラーが発生します。browser変数もその後使っていないようですので呼び出している行が今のところは不要かと思います。 -
  • 現在の一般的なブラウザではjavascriptの開発を支援するツールがついていますので(IEならF12を押せば出てきます)、そちらも調べてみるとエラー箇所が追いやすくなると思います。 http://www.atmarkit.co.jp/ait/articles/1407/11/news031.html -

ご回答ありがとうございます、
jquery-1.9.1.min.js
Jqueryでした。

ずーっとやっていた成果、マスクの問題等は解決しましたが、

フェードインフェードアウトのやり方で全く動かず四苦八苦しています。

後はsetItem内のフェードインフェードアウトの挙動が全く動かずこれに時間をかけようと思います。

編集 履歴 (0)
  • 解決されてないように見えますが、いいんでしょうか?
    回答にも書きましたが起動方法がわかりません(OnLoadなどで何を呼び出してフェードを実行するのかわかりません)ので、もしよければ書いておいてください。
    -
ウォッチ

この質問への回答やコメントをメールでお知らせします。