服务过美国总统竞选的非传统投票UI [解析及DEMO]
2024-05-28 13:12:17
上篇文章和大家介绍了需求情况和难点分析，大家可以看这个链接了解详细
服务过美国总统竞选的非传统投票UI
=================正文开始=====================================
这些天一直在忙，抽空把代码完成了。和大家分享一下实现。
大家先在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同学提出，我们可以在文字中插入一些 （空格）达到这个效果，这种方法可行，但难点是，需要找到插入点和应插入的空格数量。
我用另一种办法达到了这个效果，给大家看三张图，大家就能理解了：
上面最后一张图，为了方便大家看，我把介绍内容给移了一下。大家应该看出来了吧，我是利用一些透明的占位元素（这里加了红色边框是为了使大家看得清楚），将介绍给挤成我们要的形状。
这种做法需要解决的是，这些占位元素的宽度各是多少？这里我们借助程序来实现。
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，谢谢！
转载于:https://www.cnblogs.com/arfeizhang/p/faceoffdemo.html
服务过美国总统竞选的非传统投票UI [解析及DEMO]相关推荐
- 服务过美国总统竞选的非传统投票UI【demo已放出】
=============================== 更新:DEMO和分析已经放出,地址在这里 http://www.cnblogs.com/arfeizhang/p/faceoffdem ...
- 2012美国总统竞选赞助数据分析项目学习
项目目的:通过对2012美国总统竞选赞助数据分析,得出哪个总统更具有优势的结论 项目流程:数据载入.数据清洗.数据聚合分组以及可视化 项目地址:https://tianchi.aliyun.com/n ...
- 数据分析案例--2012美国总统竞选赞助数据分析
美国总统竞选赞助数据分析 本文来自阿里云天池实验室,案例原地址 自学数据分析的小王同学借鉴一下,自己写一遍,分析一遍,自己做的代码和结果如下 1.导入相关的python数据分析的库 import pa ...
- pandas实战-2012美国总统竞选赞助分析
1.数据载入和总览 1.1数据来源 数据来源于阿里云天池公共数据-pandas实践-2012美国总统竞选赞助数据分析,如图所示 然后下载数据并保存到本地,最后读取(本次操作使用工具-jupyter n ...
- pandas数据分析案例--2012美国总统竞选赞助数据分析
美国总统竞选赞助数据分析 本文内容参考阿里云天池实验室,在原有基础上添加了一些结论的分析. 原案例地址 数据来源 1.首先导入相关的python数据分析的库 import pandas as pd i ...
- 数据分析- 2012美国总统竞选赞助数据分析
数据分析- 2012美国总统竞选赞助数据分析 导入有关的包 1. 数据载入 1.1 数据读取 1.2 数据合并 1.3 数据基本统计分析 2. 数据清洗 2.1 缺失值处理 2.2 数据转换 2.2. ...
- 《人类简史》作者：到2028年，美国总统竞选可能不再由人类主持
1."语言是人类文化的操作系统.从语言中产生了神话和法律,众神和金钱,艺术和科学,友谊和国家,以及计算机代码.人工智能对语言的掌握,意味着它现在可以入侵并操纵文明的操作系统." 2 ...
- 竞选]美国总统竞选 奥巴马 演讲
Obama: 奥巴马: Hello, Chicago. 您好,芝加哥. If there is anyone out there who still doubts that America is a ...
- Pandas方法实践-2012美国总统竞选赞助数据分析
目录 1. 数据载入和总览 1.1 数据载入(pd.read_csv()) 1.2 数据合并(pd.concat()) 1.3 数据预览和基本统计分析 2. 数据清洗 2.1 缺失值处理 2.2 数 ...
最新文章
- 一文读懂虚拟现实产业最新发展趋势
- Mobileye采用单目摄像头做ADAS太不精确
- docker的学习总结
- python server send event_[Python之路] 多种方式实现并发Web Server
- 【mysql学习】疑问点记录
- 2013年最值得我们学习的网页作品示例【系列六】
- creating server tcp listening socket 127.0.0.1:6379: bind No error
- 自己动手一步步安装Linux系统
- web攻击方式和防御方法
- 本机 Hosts 管理神器 SwitchHosts
- 浏览器Cookie详解
- 快排及时间复杂度简单证明
- 2023 最新 抖音AI换脸表情包小程序变现玩法项目
- QCMS企业建站系统 v5.0.1
- 计算机基础知识教学反思,计算机基础课教学反思.doc
- 共轭梯度算法求最小值-scipy
- ps——油漆字体效果
- 记录一次centos被挖矿病毒感染的经历
- 能量信号和功率信号的分别
- Ubuntu18.04使用RPLIDAR A2M12雷达出错的解决办法