如果您是资深前端er,经验丰富、富有创意,也有可能面对新项目一时踌躇;如果您是前端初学者,可能胸中沟壑,无从下手。多多赏析优秀网站,开阔视野、寻求灵感、解析技术,很有必要。我们从国内外网页欣赏站(Awwwards\CSS Winner\Best CSS等)的收录作品中,选择一些有代表性的作品进行解析,欣赏、研读、提高,开始一个全新的系列博客《跟名站学前端》,希望对大家有所帮助。
今天重点看看某餐饮品牌台湾网站首页动画效果,希望对大家有所帮助。
------------------------------------------------------------
--我参加了博客之星评选,如果你喜欢我的博客,求投票,您的支持是我的动力之源,走起!
-----------------------------------------------------------------------------------------------------------------
欣赏
某餐饮品牌台湾地区活动网站,网站界面如下。
请大家移步欣赏之后,5分钟之后回来继续。系列文章的目的有两个,一是开拓视野、激发灵感、积蓄创意,其次才是获取技术的提高,所以大家不可偷懒。
解析
富有中国特色的颜色、排版用网页动画的优雅展示,css3动画、页面滚动,技术虽无奇,胜在优雅。本文主要模拟实现加载页面的展示动画。刚刚欣赏偷懒的同学,请欣赏劣质版gif。
实现
纯css3动画实现
源码我放在了codepen,请大家移步。
----------------
----------------------------------------
----------------------------------------
---------------
html实现文档结构如下,.bgWrap用来做背景,.container用来放主题内容。
<div id="index" class="page">
<!-- 背景设置-->
<div class="bgWrap">
<div class="bg_top"></div>
<div class="bg_m"></div>
<div class="bg_buttom"></div>
<div class="bg_black"></div>
</div>
<!--内容容器-->
<div class="container">
<!--桌椅,桌子椅子两个图片-->
<div class="tableWrap">
<div class="table transparent"></div>
<div class="chair transparent"></div>
</div>
<!--活动介绍,用的css sprite-->
<ul class="text">
<li class="t1 t transparent"></li>
<li class="t2 t transparent"></li>
<li class="t3 t transparent"></li>
<li class="t4 t transparent"></li>
<li class="t5 t transparent"></li>
<li class="t6 t transparent"></li>
</ul>
<!-- 标题-->
<div class="title">
<div class="logo"></div>
<div class="txt " id="index_logoTxt"></div>
</div>
</div>
</div>
css结构如下。首先背景图片的设置。
/*盒子设置,保证全屏显示*/
#index{
width: 100%;
height: 100%;
position: fixed;
}
/*背景设置,上、中、下、黑底背景设置*/
#index .bgWrap {
width: 100%;
height: 100%;
position: fixed;
}
#index .bgWrap .bg_top {
position: absolute;
top: 0;
width: 100%;
height: 68px;
background-image: url("//o.arcww.com.tw/www.mcdonalds.com.tw/bandoh/1208/images/index_bg1.png");
}
#index .bgWrap .bg_m {
position: absolute;
width: 100%;
top: 68px;
bottom: 75px;
background-image: url("//o.arcww.com.tw/www.mcdonalds.com.tw/bandoh/1208/images/red_bg.png");
}
#index .bgWrap .bg_buttom {
position: absolute;
bottom: 0;
width: 100%;
height: 75px;
background-image: url("//o.arcww.com.tw/www.mcdonalds.com.tw/bandoh/1208/images/index_bg2.png");
}
#index .bgWrap .bg_black {
width: 100%;
height: 100%;
position: fixed;
background: url("//o.arcww.com.tw/www.mcdonalds.com.tw/bandoh/1208/images/index_black.png");
background-size: 100% 100%;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/index_black.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='//o.arcww.com.tw/www.mcdonalds.com.tw/bandoh/1208/images/index_black.png', sizingMethod='scale')";
}
然后是具体内容的布局,先不管动画,先摆好位置。
/*内容容器设置,垂直水平居中*/
#index .container {
position: absolute;
width: 950px;
height: 465px;
margin:auto;
top:0;right:0;bottom:0;left:0;
}
/*桌椅*/
#index .container .tableWrap {
position: absolute;
}
/*桌子*/
#index .container .tableWrap .table {
width: 365px;
height: 359px;
background: url("//o.arcww.com.tw/www.mcdonalds.com.tw/bandoh/1208/images/index_table.png");
position: absolute;
margin-top: 71px;
margin-left: 69px;
transform:rotate(0deg);
opacity: 0;
}
/*椅子*/
#index .container .tableWrap .chair {
position: absolute;
width: 495px;
height: 465px;
background: url("//o.arcww.com.tw/www.mcdonalds.com.tw/bandoh/1208/images/index_chair.png");
transform:rotate(-20deg);
opacity: 0;
}
/*活动介绍*/
#index .container .text {
position: absolute;
left: 50%;
top: 0;
margin-top: 111px;
margin-left: 44px;
}
#index .container .text .t {
width: 35px;
height: 248px;
float: right;
background-image: url("//o.arcww.com.tw/www.mcdonalds.com.tw/bandoh/1208/images/index_txt.png");
margin-left: 7px;
opacity: 0;
}
#index .container .text .t1 {
background-position: -205px;
}
#index .container .text .t2 {
background-position: -164px;
}
#index .container .text .t3 {
background-position: -123px;
}
#index .container .text .t4 {
background-position: -82px;
}
#index .container .text .t5 {
background-position: -41px;
}
#index .container .text .t6 {
background-position: 0px;
}
/*标题*/
#index .container .title {
position: absolute;
right: 50%;
top: 0;
width: 175px;
height: 300px;
margin-top: 111px;
margin-right: -90px;
}
#index .container .title .logo {
width: 148px;
height: 139px;
background: url("//o.arcww.com.tw/www.mcdonalds.com.tw/bandoh/1208/images/inde_logo.png");
}
#index .container .title .txt {
width: 148px;
height: 85px;
background: url("//o.arcww.com.tw/www.mcdonalds.com.tw/bandoh/1208/images/index_logoTxt.png");
}
然后加上动画。
/*内容容器设置,垂直水平居中*/
#index .container {
position: absolute;
width: 950px;
height: 465px;
margin:auto;
top:0;right:0;bottom:0;left:0;
}
/*桌椅*/
#index .container .tableWrap {
position: absolute;
}
/*桌子*/
#index .container .tableWrap .table {
width: 365px;
height: 359px;
background: url("//o.arcww.com.tw/www.mcdonalds.com.tw/bandoh/1208/images/index_table.png");
position: absolute;
margin-top: 71px;
margin-left: 69px;
transform:rotate(0deg);
opacity: 0;
/*动画*/
animation:runTable .4s ease-in-out 1.8s forwards;
}
/*椅子*/
#index .container .tableWrap .chair {
position: absolute;
width: 495px;
height: 465px;
background: url("//o.arcww.com.tw/www.mcdonalds.com.tw/bandoh/1208/images/index_chair.png");
transform:rotate(-20deg);
opacity: 0;
animation:runChair 1s ease-in-out 1.8s forwards;
}
/*活动介绍*/
#index .container .text {
position: absolute;
left: 50%;
top: 0;
margin-top: 111px;
margin-left: 44px;
}
#index .container .text .t {
width: 35px;
height: 248px;
float: right;
background-image: url("//o.arcww.com.tw/www.mcdonalds.com.tw/bandoh/1208/images/index_txt.png");
margin-left: 7px;
opacity: 0;
/*动画*/
animation:runText 1s ease-in-out forwards;
}
/*设置不同的延迟*/
#index .container .text .t1 {
animation-delay:1s;
background-position: -205px;
}
#index .container .text .t2 {
animation-delay:1.1s;
background-position: -164px;
}
#index .container .text .t3 {
animation-delay:1.2s;
background-position: -123px;
}
#index .container .text .t4 {
animation-delay:1.3s;
background-position: -82px;
}
#index .container .text .t5 {
animation-delay:1.4s;
background-position: -41px;
}
#index .container .text .t6 {
animation-delay:1.5s;
background-position: 0px;
}
/*标题*/
#index .container .title {
position: absolute;
right: 50%;
top: 0;
width: 175px;
height: 300px;
margin-top: 111px;
margin-right: -90px;
/*动画*/
animation:runTitle 1.6s ease-in-out forwards;
}
#index .container .title .logo {
width: 148px;
height: 139px;
background: url("//o.arcww.com.tw/www.mcdonalds.com.tw/bandoh/1208/images/inde_logo.png");
}
#index .container .title .txt {
width: 148px;
height: 85px;
background: url("//o.arcww.com.tw/www.mcdonalds.com.tw/bandoh/1208/images/index_logoTxt.png");
}
/* 动画定义*/
@keyframes runTitle{
0%{
opacity: 0;
}
10%{
opacity: 1;
}
100%{
right:70px;
}
}
@keyframes runText{
0%{
opacity: 0;
transform:translate(-20px,60px);
}
100%{
opacity: 1;
transform:translate(0,0);
}
}
@keyframes runTable{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
@keyframes runChair{
0%{
opacity: 0;
transform:rotate(-20deg);
}
100%{
opacity: 1;
transform:rotate(0deg);
}
}
Javascript实现
源码我放在了codepen,请大家移步。
----------------
----------------------------------------
----------------------------------------
---------------
html和css部分参照前面纯css实现动画部分,html没有变化,css部分参照布局完成无动画状态,然后使用TweenMax中的TimelineMax实现,同时为了选择方便,使用jQuery中的选择库Sizzle。
TimelineMax提供了一系列的方法,用于操作动画序列、控制时间轴等。本例代码如下。
var $ = Sizzle,
indexPage=$('#index'),
title=$('#index .title'),
t=$('#index .t'),
table=$('#index .table'),
chair=$('#index .chair'),
tl;
tl = new TimelineMax();
tl.to(title,2,{right:65,ease:Power3.easeInOut},0)
.set(t,{marginTop:20},0)
.staggerTo(t,.6,{marginTop:0,autoAlpha:1},.15,'-=.7')
.to(table,.6,{autoAlpha:1},'-=.3')
.to(chair,1,{autoAlpha:1},'-=.5')
.from(chair,2,{rotation:"-20"},'-=1.5');
感谢您耐心读完,如果有疑惑,请留言讨论,如果对您有帮助,请赞我,顶我!
----------------------------------------------------------
前端开发whqet,关注web前端开发,分享相关资源,欢迎点赞,欢迎拍砖。
---------------------------------------------------------------------------------------------------------