总结下关于简历的一些细节部分

发表于   |  

赶在魔兽大电影上映前弄完了这个。也算是为了联盟一次！
昨天夜里忙完个人作品页面。也算是第一次能好好做个东西。休息了两天。今天在这里总结下

这里我把页面分为三个部分。首页部分``主体部分``面试部分

首页部分

首页部分
首页部分主要是 分为AB两块把。

电视机部分

头像标签

这一块。我主要用的是position 定位。先把关于我，前端之路这种答案写好放里面。用display:none；隐藏起来。
点击右边标签的时候。给头像啥的都加上.move的CSS类。让他乖乖到左边去。然后用transform:scale(.7)缩小下比例。完事。

头像下面信息

这里我设置的是用鼠标放上去会有一个下面的字体会上移。原理也很简单。不是我感觉也还是可以给人眼前一亮的感觉。
给父级设置一个overflow:hidden
里面的字设置

1
2
3
4
<p>
啦啦啦啦<br>
耶耶耶耶
</p>

利用hover这个伪类添加一个transform:translate(N rem)
加上过度效果就看到下面的字滑上来了。

上面那几个小图片 是用的CSS雪碧图。这个就不提了。

点击右边四个小标签的效果

技能树,关于我:
布局：开始是想用木桶布局的。但是后来一想。我为什么不直接一点。每页的个数限制死。然后让他们浮动不好了?于是我就遵从了内心的想法(主要还是懒，木桶那个太麻烦了).

出现：这里我是用JS控制的。一个延迟函数。控制他们出现
前端之路：
这里布局没什么好说的。都是一个整体。一行对应一个坑。
初始的时候我把整体都往下移3rem？还是4rem来着。然后设置一个opacity:0点击 就让其transform:translate(0)和opacity=1

额外提一点

这里为了以防万一。我这边在点击四个小标签的时候。都会先运行这个

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function tvContChange(){
		$my_skill.hide();
		$my_intern.hide();
		$my_exp.hide();
		setTimeout(function(){
            $my_skill_row_div.removeClass('my_skill_move');
			$my_intern_cont.removeClass('my_intern_cont_move');
            $my_exp_div.removeClass("my_skill_move");
		},100);
	}

function fileLeft(){

		$my_icon_box.fadeOut(200);
		setTimeout(function(){
			$my_photo.addClass('my_photo_move');
			$my_name_box.addClass('my_name_box_move');
			$tap_1.addClass('tap_1_move');
			$tap_2.addClass('tap_2_move');
			$tap_3.addClass('tap_3_move');
			$tap_4.addClass('tap_4_move');
		},200);
	}
	把头像那部分都移动到右边。然后让所有的都隐藏，不管你现在状态如何。都全部隐藏，然后去掉move。回到最开始

这里又有人估计要问了.难道不加一个keyword么，我看好多人都用。我开始是没加。后面一想也是加一个比较好.
所以这一块的逻辑差不多是
点击,触发点击事件>判断电视开关按钮状态(这里我用的埋点的方式)>如果开关是on(可以运行)>改变颜色>通过索引判断到底点的是哪个？>执行

在执行查看资料的时候。就是

1
2
3
4
5
6
7
8
9
10
11
if (cats_index == 0) {
                
				$my_photo.removeClass('my_photo_move');
			  //头像还原	$my_name_box.removeClass('my_name_box_move');//名字还原
				$tap_1.removeClass('tap_1_move');
				$tap_2.removeClass('tap_2_move');
				$tap_3.removeClass('tap_3_move');
				$tap_4.removeClass('tap_4_move');
				$my_icon_box.delay(500).fadeIn(500);
				tvContChange();//重置装置
			}

其他的 显示部分和这个类似,不过 我用setTimeout设置了一个延迟.让小框框出现的更加自然.

开关按钮

总算说到这里。我感觉这个东西是这个页面至少是我觉得前三的一个效果.看着联盟的旗帜缓缓合并，又想起来青春。
这里的小手用的是animation
transform:scale(0.8)在动画运动到一半的时候，让小手比例缩小为0.8，让我们看起来就是”我的天！仿佛就是这个小手点了按钮，就关闭了啊,有木有！！”

关闭装置：
很简单。就是一个DIV一分为二。A和B.把A设置transform:translateY(100%)B设置一个transform:translateY(-100%)然后设置一个display:none让其隐藏。背景就是联盟图了,
我给按钮设置了一个status属性,开始先判断是offoron 如果是on就执行关闭的指令。也就是把那个DIVdisplay:block然后让AB 还原。然后把状态设置为off弄个过度效果 看起来真的是酷。。建议多点几次。

打开装置：
这里打开 也就是再还原一次咯。
不过我这里设置了一个定制装置，让DIV在一秒内fadeOut这样看起来 也显得自然一点。

右边部分

这边没什么好说的。。。能说的也就是动画了。
动画用的css3的animation
我在和我聊聊这个边框 周围用四个DIV。绝对定位到四周。然后设置一个动画

1
2
3
4
5
6
@keyframes move{
	0%,100%{transform:scale(1);top:-2.0rem;left: -2rem;}
	50%{transform:scale(1.1);top:-2.3rem;left: -2.3rem;}
}
animation: move 0.8s infinite;
这样就看起来一跳一跳的。

然后点击。gif图片显示在div上面.我这边开始想找个魔兽黑暗之门的gif,奈何没找到。不然效果看起来更加酷。
然后重点来了。基本上是这个页面的no.1了。
基本逻辑：
判断电视开关状态>如果是开>让主体页面头部先出现(开始是display:none,这时候主体页面还没出现。所以我们并看不到。)>延迟电视机关闭，主体页面出现>首页transform:translate(-100%) 首页是用的绝对定位,在主体页面上面。

更多作品展示:
这里 是不是有点似曾相识的感觉。用的CSS3 loading图的思路。每一个字对应的是一个li,
设置这样

1
2
3
4
5
6
7
8
9
@keyframes move{
    20%{transfrom:scaleY(2)}
    0%,100%{transform:scaleY(1)}
}
然后在设置每个li设置一个
{
    animation-delay:.1s;（反正比上一个慢一点就行）
}
然后弄个 animation:move 1s infinite;

面试部分

点在线面试的部分就会进入在线面试部分

这里我的思路就是两个页面 都用定位.在线面试那个版块的Z-index层级比首页高，然后设置display:none
当我点击的时候使其display:block
示意图 让其出现.

  • 这里我用了一个var tiem =new Date().getHours()获取了当前是几点，再根据不同的时区出现不同的文字.
  • 文字的展现状态。这里我开始就先把这个div.width:0然后再添加一个width:18rem在过渡效果看来。一个字一个字的出现。好像打字机一样。
  • 文字消失，框框和图片移动到对应的位置。
  • 给五个按钮添加一个状态.opacity=1,和用绝对定位做一些位置的改变
  • 这里重点来了。给每一个按钮都添加一个旋转BUFF，我先给父级设置了一个transform-origin:-9.5rem 1rem就是都绕着这个点旋转。怎么形容呢。就和时钟一样。设置不同的旋转角度。
  • 因为我的文字也是在按钮容器中。经过旋转之后不用说，字的方向也烦了，我这里做法是把字体用另外一个div包起来 然后这个div再旋转不同的角度。让文字水平。这里可以通过再次设置transform-origin=让这五个按钮看起来更加自然。具体数值，我也是调了好久，猜得出来。感觉前端这东西真的是 try do it
  • 让文字延迟出现。我这里之间用的jq的delay()方法。和之前的loading图一样。让他们依次出现就行。
  • 最后关闭按钮出现。对就是右上角那个
  • 这些开关的先后顺序 都是用的定时装置。

关闭：

  • 这里我为了让按钮看起来更加逼真，在点击的时候会先触发修改按钮的样式，然后再执行延迟函数
  • 隐藏面试页面
  • 然后在移除各种”移动buff”
  • 让文字部分隐藏
  • 消除答案动画
  • 最后还原按钮

点击面试

这里的运用的方法也很”笨”，我开始把每行都transform:translateY(0.5rem)让其下沉一段距离，然后隐藏，当点击按钮触发的时候。先结束所有的动画，为了保险起见。然后我答案所在的模块show()然后让模块下面的元素都transform:translateY(0)然后每个用transition:all 1.2 1.2这样延迟方法来控制依次出现。

主体部分

轮播

轮播这里没什么好说的,就是之前的JQ写的无缝轮播，前段时间我总结过无缝轮播的两种实现方法

掌握技能。

整理开始是打算用 D3.JS或者百度的echarts的图标制作的。后面考虑了下。第一次写页面还是自己写出来比较又感觉。
这里的思路大致就是：

  • 各种框框套框框，然后不同的设置不同的颜色，容器li我这里是设置的相对定位，然后设置一个padding-left。li里面的名称设置绝对定位，去占领那个空位。另外一个div。初始width设置为0。
  • 用JS监控和懒加载原理一样。当这个元素出现在视野中，就给他添加一个“移动”BUFF。使其动态加载。我这里距离设置稍微短一点。再加上定时装置。让其看起来就和水一样，可以流动。

回到顶部

这里回到顶部 我是用的JS写的一个组件生成的。有两个状态。
暴露的接口可以设置title。等一些属性。
开始有两个”弓箭”，第一个弓箭显示。第二个弓箭隐藏。
隐藏的弓箭

显示的弓箭

在CSS里面设置hover伪类。当”抚摸”弓箭B 的时候。就为”为了联盟”那个,我用JS 改变其中的文字。然后用CSS让里面的弓箭transform:rotate(90deg)然后在发生位移。变成这样蓄势待发 。这里需要提到一点的是。先旋转再发生位移也可以，先发生位移再旋转也可以。但是先旋转和后旋转的写法不同.
用这个例子来说明

1
2
3
4
5
如果是先旋转 
transform: rotate(90deg) translateX(-1rem);
如果是先位移
transform: translateY(-1rem) rotate(90deg);
虽然这个动作看起来 是位移和旋转都是同时进行的，但是效果也不懂。我感觉translate是根据当前的视角(参照物)定的。如果是先旋转，位移的时候，参照物就发生变化了。这个也是我慢慢才试出来的。。。

同时。弓的背景图发生变化，变成拉弓样子的背景图。

点击回到原点
当点击回到原点的时候，下面的备胎弓箭A出现.弓箭B消失，
然后给弓箭A 的弓箭添加一个CSS样式 也就是transform:translateY(10rem)，再给弓箭A设置一个fadeOut(1000)这样的感觉就好像一直箭射出去之后 消失不见了。不说了 酷的不行。

点击回到首页
当点击回到首页的时候:

  • 先让首页下拉，(这里去掉上移BUFF)就行，首页层级设置比主体页面高
  • 然后让主体页面标题消失，主体页面消失
  • 打开电视
  • 移除手部动作
  • 然后让更多作品的gif图，层级变为-1;显示更多作品
  • 这里顺序还是用定制装置控制

写到这里，也算自言自语说了半天了。现总结到这里吧。