• Breaking Entry

    TeLog Anime+Game

    深夜アニメのおもしろ記事や家ゲーRPG・ネトゲ・スマホゲームのおすすめ
    感想、レビュー、リセマラ、攻略系情報ブログ
    たまに知的好奇心をそそる記事も。





    2014年2月22日土曜日

    【HTML/CSS/Javascript】ローディングjQuery設置成功!後はマビのヘッダ画像だけですわ(´・ω・`)






    どうですか!ローディングくるくる回ってますでしょ!←
    gif-load.gifgif-load.gif
    gif-load.gif gif-load.gif gif-load.gif 


    ちょっとサムネにしてる画像のサイズが大きすぎてローディングのカクカク感がある…のかも知れませんが、以前のテンプレートを犠牲にしてまでも成功させておきたかったトコロだったので今めちゃくちゃ嬉しいです…( ・`ω・´)
    後はもっとGIF画像で遊んでくっつけるだけですね!!←
    ただの円型クルクルなんて面白く無いですしおすし!!!
    何にしよっかなーwww
    ジャイ子がくるくるまわってる画像でもいれてみようかしら?w
    あぁブログ楽しいわーwwww
    HTML、CSSがここまで面白いとはwwww
    諦めなくてよかったよ!!
    と言うわけで、一応バックアップはとってありますが、もしもの何かが起きてこのバックアップが消えてしまったとき専用にこのブログを見直せば大丈夫になるように手順も書いておきます( ・`ω・´)
    あ...自分の為だけの記事なので…み、見てくれなくてもいいんだからねっ!!


    HTMLの<body>直下にloaderとfadeを追加。loader部分に画像URLと高さ幅サイズを入力する。
    /*--ローディング--*/
    <
    div id="loader"><img src="アニメーションgifまでのパス" width="画像の幅" height="画像の高さ" alt="Loading..." /></div>
    <div id="fade"></div>/*--ローディング--*/

    CSSの最後に追加し、画像の幅、画像の高さ、半分のマイナス値のみ使用する画像に合わせてカスタマイズする。   
    /*--ローディング--*/
    #loader {
        width: 画像の幅px;
        height: 画像の高さpx;
        display: none;
        position: fixed;
        _position: absolute; /* IE6対策 */
        top: 50%;
        left: 50%;
        margin-top: -XXpx; /* heightの半分のマイナス値 */
        margin-left: -XXXpx; /* widthの半分のマイナス値 */
        z-index: 100;
    }
    #fade {
        width: 100%;
        height: 100%;
        display: none;
        background-color: #FFFFFF;
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 50;
    }/*--ローディング--*/

    これをHTML側の一番最後に追加して前後を<スクリプト タイプ=" テキスト/ジャヴァスクリプト"></スクリプト>で埋め込む( ・`ω・´)

    $(
    'head').append(
        '<style type="text/css">#container { display: none; } #fade, #loader { display: block; }</style>'
    );
    jQuery.event.add(window,"load",function() { // 全ての読み込み完了後に呼ばれる関数
        var pageH = $("#container").height();
        $("#fade").css("height", pageH).delay(900).fadeOut(800);
        $("#loader").delay(600).fadeOut(300);
        $("#container").css("display", "block");
    });

    記事内にコードを入力させる方法を未だによく理解しておりませんが、これだけで自ブログに『なうろーでぃんぐ』を追加させちゃうとね!
    後はヘッダ画像ですけども…。
    適当に探して見つけた昔のデザドラ風景のSSを載せてるだけですが何に変えましょうかねぇ…。
    元々デスクトップPCになる前のノートPCから画像をもってくればいいんですが立ち上げるだけに数十分…(´・ω・`)
    昔のデザドラやレッドラとかわんさか群がってる画像がかなーりあると思うんですけども…(`;ω;´)
    ブログが充実するっていいね!!←

    0 件のコメント :

    コメントを投稿

    ANTENA RSS

    LINK





    RE:ACCESS

    アクセスランキング

    Feedly

    follow us in feedly

    PAGE TOP