Preface
上次的預告這次到來，今天就來扒一扒Iconista的頁面企蹭。本文篇幅不長白筹，精力投入不多，權當水貼一篇谅摄，內容簡短徒河，適合飯后閱讀。
Iconista 首頁
http://urinx.github.io/app/iconista/ 送漠，地址放出虚青，歡迎來踩。
Dock
由于Iconista的性質決定了其不過是一個簡單的Mac美化主題工具螺男，所以頁面必須要一眼就能突出其特性棒厘。
于是乎纵穿，最后決定了選擇這個Launchpad樣式，既能展現給大家其作用奢人，又能直觀的演示出最后的效果谓媒，并且給人一種耳目一新的感覺。
Launchpad
當方案拍定后何乎，立馬就開干句惯。既然是百分百將launchpad復制到瀏覽器中，總不能直接全部弄張圖片就了事支救，這是絕不能馬虎抢野，哥要的就是逼真，高仿各墨。
第一步指孤，就是高仿最具有象征性的Dock。
<div class="dock">
<div class="dock-container">
<a class="dock-item" href="#">
<span class="bubble">Finder</span>
<img src="res/apps/finder.png" />
</a>
...
</div>
</div>
這里用的是一個jQuery插件
$('.dock').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 60,
proximity: 80,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
);
然后修改其樣式贬堵，使之成為Yosemite風格——白色磨砂透明的Dock欄恃轩。
.dock{
width: 100%;
height: 10%;
position: absolute;
bottom: 0;
opacity: 0;
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
-ms-transition: all 3s ease;
-o-transition: all 3s ease;
transition: all 3s ease;
}
.dock-container {
position: absolute;
height: 100%;
background: rgba(255,255,255,0.3);
padding-left: 20px;
border-radius: 8px 8px 0 0;
-moz-transform: translateX(-10px);
-webkit-transform: translateX(-10px);
-o-transform: translateX(-10px);
-ms-transform: translateX(-10px);
transform: translateX(-10px);
}
a.dock-item {
display: block;
font: 12px Arial, Helvetica, sans-serif;
width: 60px;
bottom: 0px;
position: absolute;
text-align: center;
text-decoration: none;
}
.dock-item span {
display: none;
margin-left: 20px;
color: black;
}
.dock-item img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}
.bubble{
display: block;
background: rgba(255,255,255,0.8);
border-radius: 3px;
padding: 5px;
}
.bubble:before{
content: ' ';
position: absolute;
top: 24px;
left: 55px;
width: 0;
height: 0;
border: 10px solid;
border-color: rgba(255,255,255,0.8) transparent transparent transparent;
}
就連小氣泡我們也要加上，絕不含糊黎做，有圖有真相叉跛！
Dock
Loading
由于頁面上的圖標太多，再加上一個炫酷的大背景蒸殿，在網絡情況不好的時候的確很尷尬筷厘。本來不想搞個什么鬼loading動畫，只想讓每個icon 圖標依次加載然后慢慢墜落下來宏所，就像iPhone解鎖屏幕后App墜落的那個動畫效果敞掘。奈何嫌麻煩，于是就干脆用個loading楣铁，等圖標全部下載完成后再顯示出來玖雁。
好吧，我能說連loading畫面都不是自己寫的盖腕，在這里感謝codepen赫冬，在codepen上隨手一搜找了個——Battlefield 3 Loading Indicator。
Battlefield 3 Loading Indicator
一個純CSS3寫的Loading溃列，直接塞進去就行了劲厌。
...
<link rel="stylesheet" type="text/css" href="css/loading.css">
...
<div class="wrap">
<div class="bg">
<div class="loading">
<span class="title">loading</span>
<span class="text">tehran highway</span>
</div>
</div>
</div>
我們用js在后面加載圖片，這個是加載圖片的函數：
function loadimg(arr,funLoading,funOnLoad,funOnError){
var numLoaded=0,
numError=0,
isObject=Object.prototype.toString.call(arr)==="[object Object]" ? true : false;
var arr=isObject ? arr.get() : arr;
for(a in arr){
var src=isObject ? $(arr[a]).attr("data-src") : arr[a];
preload(src,arr[a]);
}
function preload(src,obj){
var img=new Image();
img.onload=function(){
numLoaded++;
funLoading && funLoading(numLoaded,arr.length,src,obj);
funOnLoad && numLoaded==arr.length && funOnLoad(numError);
};
img.onerror=function(){
numLoaded++;
numError++;
funOnError && funOnError(numLoaded,arr.length,src,obj);
}
img.src=src;
}
}
我們把要加載的圖片路徑全塞進一個數組里听隐，當所有數組里圖片全部加載完成后隱藏loading畫面补鼻，然后給要顯示的頁面一個淡出的效果（透明度從零到一）：
// ==== Preload images =====
var imgSrcArr=[
'res/bg.jpg',
'res/apps/Safari.app.png',
'res/apps/Mail.app.png',
'res/apps/Contacts.app.png',
'res/apps/Calendar.app.png',
'res/apps/Reminders.app.png',
'res/apps/Notes.app.png',
'res/apps/Maps.app.png',
'res/apps/Messages.app.png',
'res/apps/FaceTime.app.png',
'res/apps/Photo Booth.app.png',
'res/apps/iTunes.app.png',
'res/apps/iBooks.app.png',
'res/apps/App Store.app.png',
'res/apps/Game Center.app.png',
'res/apps/Preview.app.png',
'res/apps/Dictionary.app.png',
'res/apps/Calculator.app.png',
'res/apps/Dashboard.app.png',
'res/apps/iPhoto.app.png',
'res/apps/GarageBand.app.png',
'res/apps/iMovie.app.png',
'res/apps/Numbers.app.png',
'res/apps/Keynote.app.png',
'res/apps/Pages.app.png',
'res/apps/Photos.app.png',
'res/apps/Mission Control.app.png',
'res/apps/System Preferences.app.png',
'res/apps/VirtualBox.app.png',
'res/apps/Xcode.app.png',
'res/apps/Evernote.app.png',
'res/apps/Pocket.app.png',
'res/apps/feedly.app.png',
'res/apps/Alfred 2.app.png',
'res/apps/SystemPal.app.png',
'res/apps/BetterTouchTool.app.png',
'res/apps/Pushbullet.app.png',
'res/apps/Tumblr.app.png',
'res/apps/Shazam.app.png',
'res/apps/MPlayerX.app.png',
'res/apps/Sublime Text.app.png',
'res/apps/Microsoft Remote Desktop.app.png',
'res/apps/Google Chrome.app.png',
'res/apps/VMware Fusion.app.png',
'res/apps/OmniFocus.app.png',
'res/apps/7zX.app.png',
];
function setPage(el,a,b){
var html=[];
for (var i = a; i < b; i++) {
var appItem='<a class="app-item" href="#">\
<img src="'+imgSrcArr[i]+'" />\
<span>'+imgSrcArr[i].replace('res/apps/','').replace('.app.png','')+'</span>\
</a>';
html.push(appItem);
}
el.innerHTML=html.join('');
}
loadimg(imgSrcArr,null,function(){
setPage($('.app-list')[0],1,28);
setPage($('.app-list')[1],28,imgSrcArr.length);
$('.wrap').css('display','none');
$('body').css('background','url(res/bg.jpg) no-repeat');
$('body').css('background-size','100% 100%');
$('.app').css('opacity','1');
$('.dock').css('opacity','1');
},null);
至此，loading部分結束。
Download
話說最后這個簡介的部分也是構思了好久风范，如何用最少的字最大限度的表達出效果的確不容易咨跌。在追求簡潔這一點上，我們絕不妥協(xié)硼婿，這一點也讓我們十分痛苦锌半，不過最終我們還是做到了。
最后的效果就是下圖寇漫，我們刪繁就簡刊殉，追求極致。
總共就只有兩個按鈕州胳，一個提供下載记焊，直截了當，不留任何余地栓撞，直接戳中一部分人的痛點（老子就是過來下這個的遍膜，那么多文字給誰看啊）腐缤；剩下的另一部分人更多的則是對細節(jié)或是代碼感興趣，一個Github按鈕足矣肛响。詳細的使用說明都在README.md文檔寫的很清楚岭粤，主頁上寫那么多干嘛，他們更愿意看的是這個特笋。
Mobile
對于移動端我沒什么好說的剃浇，前面那些高仿Mac的效果本來就不是給你用手機看的，所以說也管不了那么多兼不兼容的問題猎物。
但是話又說回來虎囚，總不能讓手機不能看吧，那多么尷尬啊蔫磨，但又不能太麻煩淘讥，一切從簡出發(fā)。所以最后簡單粗暴的就直接加了一段：
<div class="mobile">
<h1>Iconista</h1>
<span>A super awesome cool icon tool, make your Mac OS X more cute!</span>
<img src="res/head.jpg">
<center>
<a >Download</a>
<a target="_blank">Github</a>
</center>
</div>
然后在css里用一個簡單的媒體查詢對是否是移動端做了一個判斷：
body::before {
content: 'mobile';
display: none;
}
@media only screen and (min-width: 770px) {
body::before {
content: 'desktop';
}
}
...
并且為mobile類單獨寫了一套樣式：
.mobile{
display: none
}
@media only screen and (max-width: 770px) {
.dock, .search, .app{
display: none;
}
.mobile{
display: block;
opacity: 0;
width: 300px;
height: 100%;
margin: auto;
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
-ms-transition: all 3s ease;
-o-transition: all 3s ease;
transition: all 3s ease;
}
}
.mobile a{
...
}
...
最后在js里也進行了一個判斷堤如，那些加載圖片的操作之類的在移動端就可以不用進行了（loading這個時候就沒有意義了蒲列，不過還是留下來了）：
var MQ = window.getComputedStyle(document.querySelector('body'), '::before').getPropertyValue('content').replace(/["']/g, "");
if (MQ == 'mobile') {
setTimeout(function(){
$('.wrap').css('display','none');
$('.mobile').css('opacity','1');
},5000);
}
else {
...
}
最后效果如圖：
手機端
Icon Vibratiton
最后這個純屬無聊蛋疼之舉，當然也是為了盡量逼真一下嘛——當你鼠標滑過icon圖標時搀罢，加了一個抖動的效果蝗岖，就是那個熟悉的每次你要刪除App時出現的抖動。
...
@-webkit-keyframes vibrate {
0% {
-moz-transform: translate(2px,1px) rotate(5deg);
-webkit-transform: translate(2px,1px) rotate(5deg);
transform: translate(2px,1px) rotate(5deg);
}
25% {
-moz-transform: translate(-2px,-1px) rotate(-5deg);
-webkit-transform: translate(-2px,-1px) rotate(-5deg);
transform: translate(-2px,-1px) rotate(-5deg);
}
50% {
-moz-transform: translate(2px,1px) rotate(5deg);
-webkit-transform: translate(2px,1px) rotate(5deg);
transform: translate(2px,1px) rotate(5deg);
}
75% {
-moz-transform: translate(-2px,-1px) rotate(-5deg);
-webkit-transform: translate(-2px,-1px) rotate(-5deg);
transform: translate(-2px,-1px) rotate(-5deg);
}
100% {
-moz-transform: translate(2px,1px) rotate(5deg);
-webkit-transform: translate(2px,1px) rotate(5deg);
transform: translate(2px,1px) rotate(5deg);
}
}
...
Vibratiton
Last
最后的最后榔至，歡迎大家關注我的微信公眾號（urinx）抵赢，滿滿的干貨
如果你有什么建議和想法想和我交流，各種bug想要反饋，或者純屬想要交朋友铅鲤，這是我的微信（google-2）
wechat
