新个人页面幕后花絮

日期:2013 年 4 月 7 日个人作品
很高兴这次新设计的个人页面收到了大家一定的关注,发布当天的访问量就超过我博客平常一个月的了。很多朋友问到了其中的一些细节,所以在这边就记叙一下这个设计制作这个页面背后的一些小花絮:


中文字体

大标题的中文字体用的是朗宋,倒不是我觉得这个字体特别合适,而是因为如果不想使用系统字体的话,还真没多少个人可以购买价钱不太贵的正版中文字体,所以就使用了造字工房的个人版朗宋

图片载入中...




小飞机

图片载入中...
不知道大家有没有注意到“我爱旅游”那页在世界地图上乱跑的小灰机,动画其实是个 GIF,控制他飞行的动画代码是这样的:

@-webkit-keyframes 'travel-plane' {
  0% {margin-left: -600px; opacity:0}
  10% {opacity: 0.9;}
  90% {opacity: 0.9;}
  100% {margin-left: 600px; opacity:0}
}

.travel-plane{
  -webkit-animation: travel-plane 25s linear 0.2s infinite backwards;
}




其他内容 - 桌面美化

本来还有一页想制作一张 infographics 风格的介绍当年玩桌面美化的时光,但设想的动画太复杂,最终忍痛割爱了。


足球的动画

这个页面所有动画里调得最久的就是这个足球下落反弹的动画了,为了做这个我还把忘记很久的自由落体公式也翻了出来。。。先定好下落的高度,自己设置了每次反弹之后第二次弹起的动能损失和总的反弹次数,得到了几次反弹中的顶点位置和到达顶点的时间:

@-webkit-keyframes 'football-icon-in'{
  0% {-webkit-transform: translate(0px,-200px);}
  24.4% {-webkit-transform: translate(0px,0px);}
  41.7% {-webkit-transform: translate(0px,-100px);}
  59% {-webkit-transform: translate(0px,0px);}
  71.2% {-webkit-transform: translate(0px,-50px);}
  83.4% {-webkit-transform: translate(0px,0px);}
  91.7% {-webkit-transform: translate(0px,-25px);}
  100% {-webkit-transform: translate(0px,0px);}
}


但是这每次反弹的运动都不是匀速的,配合 ease 动画会比较好(下落过程接近 ease-in,上升过程接近 ease-out),但在这组反弹里,没法用一个 keyframe 在不同时段搭配不同的 ease 函数,而用 JS 再去控制又太麻烦,所以我选择用线性的函数,每次运动到一半的时候手动插入一个关键帧来模拟,最后代码是这样的,效果我还算可以接受:

@-webkit-keyframes 'football-icon-in'{
  0% {-webkit-transform: translate(0px,-200px);}
  12.2% {-webkit-transform: translate(0px,-150px);}
  24.4% {-webkit-transform: translate(0px,0px);}
  33% {-webkit-transform: translate(0px,-75px);}
  41.7% {-webkit-transform: translate(0px,-100px);}
  50.6% {-webkit-transform: translate(0px,-75px);}
  59% {-webkit-transform: translate(0px,0px);}
  65% {-webkit-transform: translate(0px,-37.5px);}
  71.2% {-webkit-transform: translate(0px,-50px);}
  77.3% {-webkit-transform: translate(0px,-37.5px);}
  83.4% {-webkit-transform: translate(0px,0px);}
  87.7% {-webkit-transform: translate(0px,-18.8px);}
  91.7% {-webkit-transform: translate(0px,-25px);}
  95.9% {-webkit-transform: translate(0px,-18.8px);}
  100% {-webkit-transform: translate(0px,0px);}
}



照片原图

第一页的照片是一张辛辛那提的暴风雨前夜:

图片载入中...



旅游那一页的背景是伦敦的千禧桥:

图片载入中...



最后联系方式那一页的背景是内蒙古的白桦林:

图片载入中...



博文评论
微博 知乎 Twitter Dribbble Behance Instagram LinkedIn Unsplash