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

, , No Comments

どうですか!ローディングくるくる回ってますでしょ!←
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 コメント :

コメントを投稿

※閲覧記事と無関係なコメントはスパムとみなす場合がございます。
(ㆁωㆁ*)管理人がコメントを承認するまで表示されません(ㆁωㆁ*)

top