網頁開頭動畫

其實很簡單

網頁進去開始的動畫

當頁面讀取完畢後再呈現所有的畫面語法

第一個宣告綁定
$(window).bind(“load", function() {
loader()
});

 

把它額外寫出來所以就像下面的

第二個動作
function loader(){

var loader = $(“#loader");
//淡出
loader.delay(1350).fadeOut(‘slow’);
setTimeout( function(){
//清除loader裡的html
loader.html(“);
//移除body隱藏
$(“body").removeClass(“bbhidden");;

}, 2550)

};

html

<body class="bbhidden">

</body>

在loader這個div放進要做的效果即可
其餘css設定記得要把它fix在整個螢幕

寫法有很多種但是第一個是必要的

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s