服務過美國總統競選的非傳統投票UI [解析及DEMO]

上篇文章和大家介紹了需求情況和難點分析，大家可以看這個鏈接了解詳細

 

  服務過美國總統競選的非傳統投票UI

 

 

 =================正文開始=====================================

 

 

這些天一直在忙，抽空把代碼完成了。和大家分享一下實現。

 

大家先在chorme上看一下DEMO吧,在線DEMO地址 http://codepen.io/arfeizhang/full/liIHa 

 （DEMO只是為了說明原理，所以沒做瀏覽器兼容，請大家在chrome上體驗下）

 

 DEMO看着還可以吧，我們開始分析啦~

 

這種非常規的UI，在底層還是由常規的元素組成，在實現上，需要前端開發者想辦法，創造（沒錯，是創造，在現在常規資源的基礎上進行組合創造）出非常規的效果。

 

接下來，我們切入正題。

 

看到效果圖后，我分析了一下，打算這樣搭元素結構。最外面一個div，作為這個ui的最外層，里面再來三個div，兩個用來放置左右直角梯形（里面再放圖片和文字元素），余下的一個做成中間的faceoff圖標。

 

html代碼結構是這個樣子。

<div id="faceoff">
    <div id="person1" class="pic_wrap">
        <div class="pic">
         <div class="desc">          
          <div class="content">
 Raised in Bloomfield Hills, Michigan, by his parents George and Lenore Romney, Mitt Romney spent two and a half years in France as a Mormon missionary starting in 1966. In 1969 he married Ann Davies, with whom he has had five sons. By 1971, Romney had participated in the political campaigns of both of his parents. He earned a Bachelor of Arts at Brigham Young and in 1975.  7         </div>
          <div class="title">Mitt Romney</div>
        </div>
      </div>
    </div>
<div id="faceoffIcon">FACEOFF</div>
    <div id="person2" class="pic_wrap">
     <div class="pic">
        <div class="desc">
          <div class="title">Barack Obama</div>
          <div class="content"> 
 Born in Honolulu, Hawaii, Obama is a graduate of Columbia University and Harvard Law School, where he served as president of the Harvard Law Review. He was a community organizer in Chicago before earning his law degree. He worked as a civil rights attorney and taught constitutional law at the University of Chicago Law School from 1992 to 2004. 19                </div>
        </div>
      </div>
    </div>
</div>

  

接着來解決直角梯形UI，我想着可以這樣實現：把一個矩形進行沿x軸歪斜（skew），這個矩形就會變成個棱形（如下圖）,然后我們把左尖角或右尖角遮住，就變成直角梯形了（相當於切掉左/右角）。不過在過程中發現了一個問題：形狀達到我們要求了，但隨之而來的問題是，里面的圖像也扭曲了，就像下面這樣。

這個好辦，我們把圖像再扭回來就是了。來，反向扯一下。OK！現在正常了。

 

 

直角梯形的原理，如下圖所示：

 

 

 

補充一句，這種做法還可以做這種非常規ui

 

 

 

PS.還可以用webkit clip來實現非常規形狀,大家可以查下它的用法。

 

做好了形狀，接着來完成文字部分，這種非常規排版方式，adobe有過提議（CSS Shape），但目前CSS Shape只能在Webkit Nightly和Chrome Canary瀏覽器中實現，等以后等普及后，我們可以做出類似於這種效果。

 

 

因為瀏覽器支持度不夠，我們要實現非常規的UI，還是得用別的辦法。plusice同學提出，我們可以在文字中插入一些 （空格）達到這個效果，這種方法可行，但難點是，需要找到插入點和應插入的空格數量。

 

我用另一種辦法達到了這個效果，給大家看三張圖，大家就能理解了：

 

 

 

 

上面最后一張圖，為了方便大家看，我把介紹內容給移了一下。大家應該看出來了吧，我是利用一些透明的占位元素（這里加了紅色邊框是為了使大家看得清楚），將介紹給擠成我們要的形狀。

 

這種做法需要解決的是，這些占位元素的寬度各是多少？這里我們借助程序來實現。

 

//依據角的鄰邊算對邊長度
function getWidth(height) { 3   return Math.tan(deg * Math.PI / 180) * height; 4 } 5 // 依據行數得到角的鄰邊長度，進而算得對邊長度
function getWidthByLineIndex(i) { 7   return getWidth(i * lineHeight); 8 }

 

這個程序的作用是，依據索引值生成一些依次遞增或遞減的span並把它加入到介紹div內。我們需要預定好角度值deg，這里我定義的是13度，和頁面上的直角梯形角度一致。

 

文本內容完成了，接下來做遮罩。使鼠標在圖片上面時，介紹內容滑下來。這個一般是用改變dom的屬性實現的，但不是本文的重點，我就偷個懶直接用css3 動畫來做了。

 

#person1>.pic:hover>.desc {
 -webkit-animation: left-show 0.8s 0s normal forwards;
 -webkit-animation-timing-function: ease-in;
}
#person1>.pic>.desc {
 -webkit-animation: left-hide 0.8s 0s normal forwards;
 -webkit-animation-timing-function: ease-out;
}
#person2>.pic:hover>.desc {
 -webkit-animation: right-show 0.8s 0s normal forwards;
 -webkit-animation-timing-function: ease-in;
}
#person2>.pic>.desc {
 -webkit-animation: right-hide 0.8s 0s normal forwards;
 -webkit-animation-timing-function: ease-out;
}
@-webkit-keyframes left-show {
 from { 19  margin-top: -440px;
    }
 to {
 margin-top: 0px;
    }
} 25 @-webkit-keyframes left-hide {
 from { 27  margin-top: 0px;
    }
 to {
 margin-top: -440px;
    }
} 33 @-webkit-keyframes right-show {
 from { 35  margin-top: 440px;
    }
 to {
 margin-top: 0px;
    }
} 41 @-webkit-keyframes right-hide {
 from { 43  margin-top: 0px;
    }
 to {
 margin-top: 440px;
    }
}

 

 恩，上下滑動功能正常，鼠標響應區域和文本內容也是直角梯形。好了，我們把它完成了！！！活動下手~~~~~~~ 等等，有個問題，被我們旋轉的左右部分div，斜邊出現了鋸齒，還是比較明顯的。

 

 

好吧，抱着追求完美的心態，我們來解決這個問題。將元素3d變換不僅可以開啟硬件加速，讓元素脫離文檔流，提升性能，還可以達到我們的目的-反鋸齒。但缺點是，字會有點模糊（因為它會把在上面的圖或文字等內容當成圖片紋理來貼圖），不過這個小瑕疵比鋸齒好得多。如果大家有別的方法完美消鋸齒，也請告訴我。

 

 

好，收攤。現在各位感覺到了,實現這個UI其實也不難，要用點巧即可。實現方法不止一種，我感覺我雖然實現了這個需求，但我相信還有別的更優雅的辦法。此文僅做拋磚引玉，大家如果有別的實現方法，和我分享下喲。 :)

所有代碼如下：

<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
    <meta charset="UTF-8">   
        <title>Faceoff</title>
        <style type="text/css">
div#faceoff {
 overflow: hidden;
 width: 710px;
}
.pic>.desc {
 background-color: rgba(0, 0, 0, 0.5);
 color: white;
}
.pic>.desc>.content {
 font-size: 22px;
 line-height: 26px;
 word-break: break-all;
}
.pic>.desc>.title {
 font-size: 30px;
 margin-bottom: 20px;
}
.pic_wrap {
 -webkit-transform: skewX(-13deg) translateZ(0);
 overflow: hidden;
 width: 353px;
 height: 480px;
 position: relative;
}
#person1 {
 left: -87px;
 float: left;
}
#person1>.pic {
 width: 461px;
 height: 480px;
 background: url("resources/1.jpg") no-repeat;
 background-position: -51px 0px;
 background-size: 620px 480px;
 -webkit-transform: skewX(13deg);
}
#person1>.pic>.desc {
 width: 312px;
 float: left;
 margin-left: 90px;
 margin-top: -440px;
}
#person1>.pic>.desc>.title {
 text-align: left;
 padding-left: 5px;
}
#person1>.pic>.desc>.content {
 padding: 2px;
 height: 440px;
}
#person2 {
 left: -57px;
}
#person2>.pic {
 width: 361px;
 height: 480px;
 background: url("resources/2.jpg") no-repeat;
 background-position: 20px -25px;
 background-size: 376px 540px;
 -webkit-transform: skewX(13deg);
 margin-left: -100px;
}
#person2>.pic>.desc {
 width: 320px;
 float: right;
}
#person2>.pic>.desc>.title {
 text-align: right;
 padding-right: 5px;
}
#person2>.pic>.desc>.content {
 padding-right: 2px;
 height: 440px;
}
.space {
    /* border: 1px solid red;*/
 height: 22px;
}
.space.left {
 float: left;
 clear: left;
}
.space.right {
 float: right;
 clear: right;
}
#faceoffIcon {
 width: 80px;
 height: 80px;
 position: absolute;
 background-color: red;
 border: 3px solid white;
 border-radius: 40px;
 top: 194px;
 left: 247px;
 z-index: 2;
 color: white;
 line-height: 80px;
 text-align: center;
 font-weight: bold;
}
#faceoff:hover>#faceoffIcon {
 display: none;
}
#person1>.pic:hover>.desc {
 -webkit-animation: left-show 0.8s 0s normal forwards;
 -webkit-animation-timing-function: ease-in;
}
#person1>.pic>.desc {
 -webkit-animation: left-hide 0.8s 0s normal forwards;
 -webkit-animation-timing-function: ease-out;
}
#person2>.pic:hover>.desc {
 -webkit-animation: right-show 0.8s 0s normal forwards;
 -webkit-animation-timing-function: ease-in;
}
#person2>.pic>.desc {
 -webkit-animation: right-hide 0.8s 0s normal forwards;
 -webkit-animation-timing-function: ease-out;
}
@-webkit-keyframes left-show {
 from { 129  margin-top: -440px;
    }
 to {
 margin-top: 0px;
    }
} 135 @-webkit-keyframes left-hide {
 from { 137  margin-top: 0px;
    }
 to {
 margin-top: -440px;
    }
} 143 @-webkit-keyframes right-show {
 from { 145  margin-top: 440px;
    }
 to {
 margin-top: 0px;
    }
} 151 @-webkit-keyframes right-hide {
 from { 153  margin-top: 0px;
    }
 to {
 margin-top: 440px;
    }
} 159 
    </style>
</head>
<body>
  <div id="faceoff">
    <div id="person1" class="pic_wrap">
        <div class="pic">
         <div class="desc">          
          <div class="content">
 Raised in Bloomfield Hills, Michigan, by his parents George and Lenore Romney, Mitt Romney spent two and a half years in France as a Mormon missionary starting in 1966. In 1969 he married Ann Davies, with whom he has had five sons. By 1971, Romney had participated in the political campaigns of both of his parents. He earned a Bachelor of Arts at Brigham Young and in 1975. 169         </div>
          <div class="title">Mitt Romney</div>
        </div>
      </div>
    </div>
<div id="faceoffIcon">FACEOFF</div>
    <div id="person2" class="pic_wrap">
     <div class="pic">
        <div class="desc">
          <div class="title">Barack Obama</div>
          <div class="content"> 
 Born in Honolulu, Hawaii, Obama is a graduate of Columbia University and Harvard Law School, where he served as president of the Harvard Law Review. He was a community organizer in Chicago before earning his law degree. He worked as a civil rights attorney and taught constitutional law at the University of Chicago Law School from 1992 to 2004. 181                </div>
        </div>
      </div>
    </div>
</div>

<script type="text/javascript">
//角度為13度
var deg = 13, 190   //占位元素的高
 lineHeight = 22, 192   //元素高
 contentHeight = 460, 194   //占位元素個數（行數）
 lineCount = Math.ceil(contentHeight / lineHeight), 196   //相鄰兩個占位元素的寬度偏移量
 lineOffset = getWidth(lineHeight), 198   //最大占位容器寬度，右側的占位容器從大到小遞減，左側的占位元素從小到大遞增
 lineMaxWidth = getWidth(contentHeight); 200 
//用占位容器來填充形狀
function SetShape(isRight) { 203   var oFrag = document.createDocumentFragment(); 204   if (isRight) { 205     for (var i = 0; i < lineCount; i++) { 206       var op = document.createElement("span"); 207  op.classList.add("space"); 208  op.classList.add("left"); 209       // 右側的占位容器從大到小遞減
 op.style.width = (lineMaxWidth - i * lineOffset) + "px"; 211  oFrag.appendChild(op); 212  } 213  document.querySelector("#person2 .desc").insertBefore(oFrag, document.querySelector("#person2 .content")); 214  } else { 215     for (var i = 0; i < lineCount; i++) { 216       var op = document.createElement("span"); 217  op.classList.add("space"); 218  op.classList.add("right"); 219       // 左側的占位元素從小到大遞增
 op.style.width = (i * lineOffset) + "px"; 221  oFrag.appendChild(op); 222  } 223  document.querySelector("#person1 .desc").insertBefore(oFrag, document.querySelector("#person1 .content")); 224  } 225 
} 227 //依據角的鄰邊算對邊長度
function getWidth(height) { 229   return Math.tan(deg * Math.PI / 180) * height; 230 } 231 // 依據行數得到角的鄰邊長度，進而算得對邊長度
function getWidthByLineIndex(i) { 233   return getWidth(i * lineHeight); 234 } 235 SetShape(false); 236 SetShape(true); 237 </script>
    
    </body>
    </html>

素材兩張（尺寸已縮小，可右鍵下載源圖）：

 

 

 

 本文是博主Arfei Zhang原創，歡迎轉載。轉載請注明轉自博客園，並附上本文鏈接http://www.cnblogs.com/arfeizhang/p/faceoffdemo.html，謝謝！