案例-时间轴特效

滚动时间轴特效

关键点

• 中间线的定位
• item 左右交错分布
• 遮罩 mask
• 使 item 层级高过遮罩
• 鼠标上下滚动的样式

中间线的定位

• 容器要有一个固定宽度
• 使容器在视图居中
• 给容器的伪元素设置绝对定位，高度百分百，在 y 轴溢出设置为滚动，左为百分之五十，在设置下宽度，背景，层级既可
• 示例：

.timeline::before {
	content: '';
	position: absolute;
	left: 50%;
	height: 100%;
	overflow-y: scroll;
	width: 1px;
	background-color: white;
	background-repeat: no-repeat !important;
	/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
	background-attachment: fixed !important;
	/* 让背景图基于容器大小伸缩 */
	background-size: cover !important;
	z-index: 50;
}

item 左右交错分布

• 1.要考虑好如何布局，因为使布局交错分布的属性 align-self¹有限制
• 2.存在该属性的类要作用在偶数的项中，并使 align-self: flex-end 即可
• 示例：

.item:nth-child(even) {
	align-self: flex-end; // 这个是使item 交错垂直布局
	display: flex;
	flex-direction: row-reverse;
}
.item:nth-child(even):hover {
	translate: -100px 50px;
	z-index: 60;
}

遮罩 mask

• 1.给容器添加相对定位
• 2.在容器中添加 div，并设置为绝对定位，宽高百分百，背景只要半透明就行
• 示例:

.mask {
	position: absolute;
	text-align: center;
	color: black;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.7);
}

使 item 层级高过遮罩

• 1.准备好一个样式 transform:translateZ(0);²
• 2.然后通过滚动等条件来判断给哪一个 item 添加

鼠标上下滚动的样式

• 1.获取容器的 dom 和给容器添加一个鼠标滚动事件(onWheel)
• 2.通过鼠标事件的 event 获取 e.nativeEvent.deltaY³
• 3.如果向上滚则判断 dom 的 scrollTop 是否 <=0
  • 如果是，则判断当前数组的索引是否小于 0，小于返回；不是则设置当前数组索引为当前数组索引-1
  • 如果不是，则判断 dom 的 scrollTop+dom 的 clientHeight 是否 >= dom 的 scrollHeight，如果是就判断当前数组的索引是否大于数组的长度-1，是返回；不是则设置当前数组索引为当前数组索引+1
• 4.遍历数组，判断当前索引是否大于数组长度-1，是就设置当前索引为数组长度-1，接着判断如果当前索引 = 当前数组索引，就添加 transform:translateZ(0);并给改变背景的变量设置为当前背景，否则为空

备注：

[1] align-self：只能作用单个项目并对齐当前 flex 行中的元素。align-self使用的条件是存在三层的div，这三个div是祖>父>子关系，该属性使用在父布局，则祖布局只能有一个布局就是父布局，然后其它内容只能写在子布局中，而祖布局有多少个兄弟元素都没关系。

[2] transform:translateZ(0);：在3D变化中,元素的Z轴是指元素在初始情况下,从元素背面穿过元素指向元素正面的方向,初始状态下元素的Z轴值为0,沿着Z轴往下移动,Z轴值为负值,反之则为正值。

[3] e.nativeEvent.deltaY：在 React 中，e.nativeEvent 才是原生 DOM 事件的那个 event,可以阻止监听同一事件的其他事件监听器被调用。detaltaY:向下滚动回返回正值，向上滚动回返回负值，否则返回0。