案例-时间轴特效

滚动时间轴特效

关键点

• 中间线的定位
• 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 ? return : 当前数组索引 = 当前数组索引-1
   	: dom.scrollTop+dom.clientHeight >= dom.scrollHeight 
   		? (当前数组索引 > 数组的长度-1 ? return : null) 
   		: 当前数组索引 = 当前数组索引+1

4. 遍历数组，判断

   if(当前索引 > 数组长度-1) 当前索引 = 数组长度-1
   if(当前索引 ==== 当前数组索引) {
   	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。