Welcome, Old Sport!

网页预加载动画效果

by ilikecss ON 2013/01/22 12926

网页预加载动画效果好久没弄code教程了,最近在网上看到一款不错的预加载效果,适用于各类网站、博客,于是花了一点时间把这个效果分离出来,脚本也做了分离优化。废话不多了,大家可以先参考下面的Demo

Step1. 创建HTML

<div class="clearfix loading" id="content">
//被预加载的内容
</div>

Step2. 创建CSS

#content.loading {
	opacity:0;
}
#loading {
	position:relative;
	width:40%;
	margin:30% 30%;
	padding-top:70px;
	text-align:center;
	color:#555555;
	opacity:0.9;
	text-transform:uppercase;
	font:normal 12px/14px "ff-basic-gothic-web-pro",Arial,Helvetica,sans-serif;
	letter-spacing:7px;
}
.outer {
	width:30px;
	height:30px;
	-webkit-border-radius:15px;
	-moz-border-radius:15px;
	border-radius:15px;
	display:block;
	background:rgba(85,85,85,0.2);
	margin:0 auto 20px;
	position:relative;
}
.inner {
	width:20px;
	height:20px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
	display:block;
	background:rgba(85,85,85,0.9);
	position:absolute;
	left:5px;
	top:5px;
}
@-webkit-keyframes throbber {
	0% {
	-webkit-transform:scale(1);
}
50% {
	-webkit-transform:scale(1.3);
}
100% {
	-webkit-transform:scale(1);
}
}@-moz-keyframes throbber {
	0% {
	-moz-transform:scale(1);
}
50% {
	-moz-transform:scale(1.3);
}
100% {
	-moz-transform:scale(1);
}
}@-ms-keyframes throbber {
	0% {
	-ms-transform:scale(1);
}
50% {
	-ms-transform:scale(1.3);
}
100% {
	-ms-transform:scale(1)
}
}@-o-keyframes throbber {
	0% {
	-o-transform:scale(1);
}
50% {
	-o-transform:scale(1.3);
}
100% {
	-o-transform:scale(1);
}
}.outer {
	-webkit-animation:throbber 0.4s infinite;
	-moz-animation:throbber 0.4s infinite;
	-ms-animation:throbber 0.4s infinite;
	-o-animation:throbber 0.4s infinite;
}
.loading-slow {
	display:none;
	margin:20px 0 0;
	letter-spacing:0;
	text-transform:none;
	font:normal 19px/23px "cronos-pro-display",helvetica,arial,sans-serif;
}

Loading效果的CSS,页面布局请大家自定义。

Step3. 插入脚本

$.extend($.easing, {
easeInOutQuint: function(e, t, n, r, i) {
	return (t /= i / 2) < 1 ? r / 2 * t * t * t * t * t   n: r / 2 * ((t -= 2) * t * t * t * t   2)   n
}
}); //声明一些变量
$(function() {
    widthTester = $(window).width();
    $("#container").prepend('<div id="loading"><span class="outer"><span class="inner"></span></span>&nbsp;Loading<div class="loading-slow">看来您的网速很慢,或遇到阻碍,请点击 <a href="#" id="refresh">这里</a> 去重新刷新一下, 或者点击 <a href="#" id="show-content">这里</a> 直接跳过加载.</div></div>');
    setTimeout(function() {
        $(".loading-slow").fadeIn(500)
    },
    5e3);
    $("#refresh").click(function() {
        location.reload();
        return ! 1
    });
    $("#show-content").click(function() {
        $("#loading").fadeOut(500, 
        function() {
            $(this).remove();
            $(".pattern").removeClass("pattern-closed");
            $(window).width() > 768 ? setTimeout(function() {
                $("#content").removeClass("loading")
            },
            550) : $("#content").removeClass("loading")
        });
        return ! 1
    });
    $(window).bind("scroll", 
    function() {
        scrollDisplayMenu()
    });
    // STAR插入了一个返回顶部的效果,不需要可以注销掉
    $("#back-to-top").click(function() {
        $("body,html").animate({
            scrollTop: 0
        },
        1e3, "easeInOutQuint");
        return ! 1
    });
    $(".nav-control a").click(function() {
        $html = $("html");
        return ! 1
    })
}); 
// Loading区域
$(window).load(function() {
    if ($("#content").hasClass("about")) {
        var e = function() {
            var e = $(window).width(),
            t = $(".blurb-photos").outerHeight(),
            n = $(".photos-holder").outerHeight(),
            r = (t - n - 30) * .5;
            if (e > 768) {
                $(".blurb-photos").css("height", t);
                $(".photos-holder").css("margin-top", r).css("margin-bottom", r)
            }
        };
        e()
    } else if ($("#content").hasClass("work-home")) {
        var e = function() {
            var e = 0,
            t;
            $(".project p").each(function() {
                $this = $(this);
                if ($this.outerHeight() > e) {
                    t = this;
                    e = $this.outerHeight()
                }
            });
            $(".project p").height(e   "px")
        };
        e()
    }
    $(window).on("debouncedresize", 
    function() {
        widthTesterResized = $(window).width();
        if (widthTester != widthTesterResized) {
            $(".blurb-photos").attr("style", "");
            $(".photos-holder").attr("style", "");
            $(".project p").attr("style", "");
            setTimeout(function() {
                e()
            },
            350);
            t();
            widthTester = widthTesterResized
        }
    });
    var t = function() {
        $("#content").css("min-height", $(window).height() - 258)
    };
    t();
    $("#loading").fadeOut(500, 
    function() {
        $(this).remove();
        $("#content").removeClass("loading")
    })
});
10条评论
  1. 效果很是给力

  2. #2

    金刚禅狮子吼说道:

    这个好,还是回到主题了

  3. #3

    Marvin说道:

    终于有教程了~




TOP