服务过美国总统竞选的非传统投票UI [解析及DEMO]

上篇文章和大家介绍了需求情况和难点分析，大家可以看这个链接了解详细
 
 
 =================正文开始=====================================
 
 
这些天一直在忙，抽空把代码完成了。和大家分享一下实现。
 
大家先在chorme上看一下DEMO吧,在线DEMO地址 http://codepen.io/arfeizhang/full/liIHa 
 （DEMO只是为了说明原理，所以没做浏览器兼容，请大家在chrome上体验下）
 
 DEMO看着还可以吧，我们开始分析啦~
 
这种非常规的UI，在底层还是由常规的元素组成，在实现上，需要前端开发者想办法，创造（没错，是创造，在现在常规资源的基础上进行组合创造）出非常规的效果。
 
接下来，我们切入正题。
 
看到效果图后，我分析了一下，打算这样搭元素结构。最外面一个div，作为这个ui的最外层，里面再来三个div，两个用来放置左右直角梯形（里面再放图片和文字元素），余下的一个做成中间的faceoff图标。
 
html代码结构是这个样子。
 1 <div id="faceoff">
 2     <div id="person1" class="pic_wrap">
 3         <div class="pic">
 4          <div class="desc">          
 5           <div class="content">
 6             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>
 8           <div class="title">Mitt Romney</div>
 9         </div>
10       </div>
11     </div>
12 <div id="faceoffIcon">FACEOFF</div>
13     <div id="person2" class="pic_wrap">
14      <div class="pic">
15         <div class="desc">
16           <div class="title">Barack Obama</div>
17           <div class="content"> 
18                    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>
20         </div>
21       </div>
22     </div>
23 </div>

  

接着来解决直角梯形UI，我想着可以这样实现：把一个矩形进行沿x轴歪斜（skew），这个矩形就会变成个棱形（如下图）,然后我们把左尖角或右尖角遮住，就变成直角梯形了（相当于切掉左/右角）。不过在过程中发现了一个问题：形状达到我们要求了，但随之而来的问题是，里面的图像也扭曲了，就像下面这样。
这个好办，我们把图像再扭回来就是了。来，反向扯一下。OK！现在正常了。
 
 
直角梯形的原理，如下图所示：
 
 
 
补充一句，这种做法还可以做这种非常规ui
 
 
 
PS.还可以用webkit clip来实现非常规形状,大家可以查下它的用法。
 
做好了形状，接着来完成文字部分，这种非常规排版方式，adobe有过提议（CSS Shape），但目前CSS Shape只能在Webkit Nightly和Chrome Canary浏览器中实现，等以后等普及后，我们可以做出类似于这种效果。
 
 
因为浏览器支持度不够，我们要实现非常规的UI，还是得用别的办法。plusice同学提出，我们可以在文字中插入一些&nbsp;（空格）达到这个效果，这种方法可行，但难点是，需要找到插入点和应插入的空格数量。
 
我用另一种办法达到了这个效果，给大家看三张图，大家就能理解了：
 
 
 
 
上面最后一张图，为了方便大家看，我把介绍内容给移了一下。大家应该看出来了吧，我是利用一些透明的占位元素（这里加了红色边框是为了使大家看得清楚），将介绍给挤成我们要的形状。
 
这种做法需要解决的是，这些占位元素的宽度各是多少？这里我们借助程序来实现。
 
1 //依据角的邻边算对边长度
2 function getWidth(height) {
3   return Math.tan(deg * Math.PI / 180) * height;
4 }
5 // 依据行数得到角的邻边长度，进而算得对边长度
6 function getWidthByLineIndex(i) {
7   return getWidth(i * lineHeight);
8 }

 

这个程序的作用是，依据索引值生成一些依次递增或递减的span并把它加入到介绍div内。我们需要预定好角度值deg，这里我定义的是13度，和页面上的直角梯形角度一致。
 
文本内容完成了，接下来做遮罩。使鼠标在图片上面时，介绍内容滑下来。这个一般是用改变dom的属性实现的，但不是本文的重点，我就偷个懒直接用css3 动画来做了。
 
 1 #person1>.pic:hover>.desc {
 2     -webkit-animation: left-show 0.8s 0s normal forwards;
 3     -webkit-animation-timing-function: ease-in;
 4 }
 5 #person1>.pic>.desc {
 6     -webkit-animation: left-hide 0.8s 0s normal forwards;
 7     -webkit-animation-timing-function: ease-out;
 8 }
 9 #person2>.pic:hover>.desc {
10     -webkit-animation: right-show 0.8s 0s normal forwards;
11     -webkit-animation-timing-function: ease-in;
12 }
13 #person2>.pic>.desc {
14     -webkit-animation: right-hide 0.8s 0s normal forwards;
15     -webkit-animation-timing-function: ease-out;
16 }
17 @-webkit-keyframes left-show {
18     from {
19         margin-top: -440px;
20     }
21     to {
22         margin-top: 0px;
23     }
24 }
25 @-webkit-keyframes left-hide {
26     from {
27         margin-top: 0px;
28     }
29     to {
30         margin-top: -440px;
31     }
32 }
33 @-webkit-keyframes right-show {
34     from {
35         margin-top: 440px;
36     }
37     to {
38         margin-top: 0px;
39     }
40 }
41 @-webkit-keyframes right-hide {
42     from {
43         margin-top: 0px;
44     }
45     to {
46         margin-top: 440px;
47     }
48 }
hover滑动动画

 

 恩，上下滑动功能正常，鼠标响应区域和文本内容也是直角梯形。好了，我们把它完成了！！！活动下手~~~~~~~ 等等，有个问题，被我们旋转的左右部分div，斜边出现了锯齿，还是比较明显的。
 
 
好吧，抱着追求完美的心态，我们来解决这个问题。将元素3d变换不仅可以开启硬件加速，让元素脱离文档流，提升性能，还可以达到我们的目的-反锯齿。但缺点是，字会有点模糊（因为它会把在上面的图或文字等内容当成图片纹理来贴图），不过这个小瑕疵比锯齿好得多。如果大家有别的方法完美消锯齿，也请告诉我。
 
 
好，收摊。现在各位感觉到了,实现这个UI其实也不难，要用点巧即可。实现方法不止一种，我感觉我虽然实现了这个需求，但我相信还有别的更优雅的办法。此文仅做抛砖引玉，大家如果有别的实现方法，和我分享下哟。 :)
所有代码如下：
  1 <!DOCTYPE HTML>
  2 <html manifest="" lang="en-US">
  3 <head>
  4     <meta charset="UTF-8">   
  5         <title>Faceoff</title>
  6         <style type="text/css">
  7 div#faceoff {
  8     overflow: hidden;
  9     width: 710px;
 10 }
 11 .pic>.desc {
 12     background-color: rgba(0, 0, 0, 0.5);
 13     color: white;
 14 }
 15 .pic>.desc>.content {
 16     font-size: 22px;
 17     line-height: 26px;
 18     word-break: break-all;
 19 }
 20 .pic>.desc>.title {
 21     font-size: 30px;
 22     margin-bottom: 20px;
 23 }
 24 .pic_wrap {
 25     -webkit-transform: skewX(-13deg) translateZ(0);
 26     overflow: hidden;
 27     width: 353px;
 28     height: 480px;
 29     position: relative;
 30 }
 31 #person1 {
 32     left: -87px;
 33     float: left;
 34 }
 35 #person1>.pic {
 36     width: 461px;
 37     height: 480px;
 38     background: url("resources/1.jpg") no-repeat;
 39     background-position: -51px 0px;
 40     background-size: 620px 480px;
 41     -webkit-transform: skewX(13deg);
 42 }
 43 #person1>.pic>.desc {
 44     width: 312px;
 45     float: left;
 46     margin-left: 90px;
 47     margin-top: -440px;
 48 }
 49 #person1>.pic>.desc>.title {
 50     text-align: left;
 51     padding-left: 5px;
 52 }
 53 #person1>.pic>.desc>.content {
 54     padding: 2px;
 55     height: 440px;
 56 }
 57 #person2 {
 58     left: -57px;
 59 }
 60 #person2>.pic {
 61     width: 361px;
 62     height: 480px;
 63     background: url("resources/2.jpg") no-repeat;
 64     background-position: 20px -25px;
 65     background-size: 376px 540px;
 66     -webkit-transform: skewX(13deg);
 67     margin-left: -100px;
 68 }
 69 #person2>.pic>.desc {
 70     width: 320px;
 71     float: right;
 72 }
 73 #person2>.pic>.desc>.title {
 74     text-align: right;
 75     padding-right: 5px;
 76 }
 77 #person2>.pic>.desc>.content {
 78     padding-right: 2px;
 79     height: 440px;
 80 }
 81 .space {
 82     /* border: 1px solid red;*/
 83     height: 22px;
 84 }
 85 .space.left {
 86     float: left;
 87     clear: left;
 88 }
 89 .space.right {
 90     float: right;
 91     clear: right;
 92 }
 93 #faceoffIcon {
 94     width: 80px;
 95     height: 80px;
 96     position: absolute;
 97     background-color: red;
 98     border: 3px solid white;
 99     border-radius: 40px;
100     top: 194px;
101     left: 247px;
102     z-index: 2;
103     color: white;
104     line-height: 80px;
105     text-align: center;
106     font-weight: bold;
107 }
108 #faceoff:hover>#faceoffIcon {
109     display: none;
110 }
111 #person1>.pic:hover>.desc {
112     -webkit-animation: left-show 0.8s 0s normal forwards;
113     -webkit-animation-timing-function: ease-in;
114 }
115 #person1>.pic>.desc {
116     -webkit-animation: left-hide 0.8s 0s normal forwards;
117     -webkit-animation-timing-function: ease-out;
118 }
119 #person2>.pic:hover>.desc {
120     -webkit-animation: right-show 0.8s 0s normal forwards;
121     -webkit-animation-timing-function: ease-in;
122 }
123 #person2>.pic>.desc {
124     -webkit-animation: right-hide 0.8s 0s normal forwards;
125     -webkit-animation-timing-function: ease-out;
126 }
127 @-webkit-keyframes left-show {
128     from {
129         margin-top: -440px;
130     }
131     to {
132         margin-top: 0px;
133     }
134 }
135 @-webkit-keyframes left-hide {
136     from {
137         margin-top: 0px;
138     }
139     to {
140         margin-top: -440px;
141     }
142 }
143 @-webkit-keyframes right-show {
144     from {
145         margin-top: 440px;
146     }
147     to {
148         margin-top: 0px;
149     }
150 }
151 @-webkit-keyframes right-hide {
152     from {
153         margin-top: 0px;
154     }
155     to {
156         margin-top: 440px;
157     }
158 }
159 
160     </style>
161 </head>
162 <body>
163   <div id="faceoff">
164     <div id="person1" class="pic_wrap">
165         <div class="pic">
166          <div class="desc">          
167           <div class="content">
168             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>
170           <div class="title">Mitt Romney</div>
171         </div>
172       </div>
173     </div>
174 <div id="faceoffIcon">FACEOFF</div>
175     <div id="person2" class="pic_wrap">
176      <div class="pic">
177         <div class="desc">
178           <div class="title">Barack Obama</div>
179           <div class="content"> 
180                    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>
182         </div>
183       </div>
184     </div>
185 </div>
186 
187 <script type="text/javascript">
188 //角度为13度
189 var deg = 13,
190   //占位元素的高
191   lineHeight = 22,
192   //元素高
193   contentHeight = 460,
194   //占位元素个数（行数）
195   lineCount = Math.ceil(contentHeight / lineHeight),
196   //相邻两个占位元素的宽度偏移量
197   lineOffset = getWidth(lineHeight),
198   //最大占位容器宽度，右侧的占位容器从大到小递减，左侧的占位元素从小到大递增
199   lineMaxWidth = getWidth(contentHeight);
200 
201 //用占位容器来填充形状
202 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       // 右侧的占位容器从大到小递减
210       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       // 左侧的占位元素从小到大递增
220       op.style.width = (i * lineOffset) + "px";
221       oFrag.appendChild(op);
222     }
223     document.querySelector("#person1 .desc").insertBefore(oFrag, document.querySelector("#person1 .content"));
224   }
225 
226 }
227 //依据角的邻边算对边长度
228 function getWidth(height) {
229   return Math.tan(deg * Math.PI / 180) * height;
230 }
231 // 依据行数得到角的邻边长度，进而算得对边长度
232 function getWidthByLineIndex(i) {
233   return getWidth(i * lineHeight);
234 }
235 SetShape(false);
236 SetShape(true);
237 </script>
238     
239     </body>
240     </html>
faceoff全部代码

素材两张（尺寸已缩小，可右键下载源图）：

 

 

 

 本文是博主Arfei Zhang原创，欢迎转载。转载请注明转自博客园，并附上本文链接http://www.cnblogs.com/arfeizhang/p/faceoffdemo.html，谢谢！

posted @ 2014-07-08 16:45  Arfei Zhang  阅读(2237)  评论(4)  编辑  收藏  举报