跟名站学前端之mcdonalds

如果您是资深前端er，经验丰富、富有创意，也有可能面对新项目一时踌躇；如果您是前端初学者，可能胸中沟壑，无从下手。多多赏析优秀网站，开阔视野、寻求灵感、解析技术，很有必要。我们从国内外网页欣赏站(Awwwards\CSS Winner\Best CSS等)的收录作品中，选择一些有代表性的作品进行解析，欣赏、研读、提高，开始一个全新的系列博客《跟名站学前端》，希望对大家有所帮助。

今天重点看看某餐饮品牌*网站首页动画效果，希望对大家有所帮助。

------------------------------------------------------------

--我参加了博客之星评选，如果你喜欢我的博客，求投票，您的支持是我的动力之源，走起！

-----------------------------------------------------------------------------------------------------------------

欣赏

某餐饮品牌*地区活动网站，网站界面如下。

跟名站学前端之mcdonalds

请大家移步欣赏之后，5分钟之后回来继续。系列文章的目的有两个，一是开拓视野、激发灵感、积蓄创意，其次才是获取技术的提高，所以大家不可偷懒。

解析

富有中国特色的颜色、排版用网页动画的优雅展示，css3动画、页面滚动，技术虽无奇，胜在优雅。本文主要模拟实现加载页面的展示动画。刚刚欣赏偷懒的同学，请欣赏劣质版gif。

跟名站学前端之mcdonalds

实现

纯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前端开发，分享相关资源，欢迎点赞，欢迎拍砖。
---------------------------------------------------------------------------------------------------------

秒客网

跟名站学前端之mcdonalds

欣赏

解析

实现

纯css3动画实现

Javascript实现

相关文章