[分享]css3整体滚动动画

CSS3整体滚动动画是一种非常炫酷的页面效果，通过一些简单的CSS代码，就可以让页面以流畅的滚动方式呈现出来。/ CSS代码开始 / body{ overflow: hidden; } .contai...

CSS3整体滚动动画是一种非常炫酷的页面效果，通过一些简单的CSS代码，就可以让页面以流畅的滚动方式呈现出来。

/* CSS代码开始 */
body{
  overflow: hidden;
}

.container{
  height: 100vh; /* 设置容器高度为视窗高度 */
  overflow: hidden; /* 设置容器溢出隐藏 */
}

.section{
  height: 100vh; /* 设置每一部分的高度为视窗高度 */
  position: relative; /* 设置定位为相对定位 */
  transition: transform 1s ease; /* 设置变换动画效果，1秒内完成，缓动效果 */
}

.section:nth-child(odd){
  background-color: #f2f2f2; /* 设置奇数部分的背景色为浅灰色 */
}

.section:nth-child(even){
  background-color: #fff; /* 设置偶数部分的背景色为白色 */
}

.section.active{
  transform: translateY(-100vh); /* 设置上移整个视窗高度的变换效果 */
}
/* CSS代码结束 */ 

代码的解释：

首先，我们要把页面的滚动条隐藏，以便我们自己控制页面的滚动方式。我们可以通过设置body的overflow属性为hidden来实现。

然后，我们需要创建一个整个页面的容器，容器的高度为视窗的高度，这样才能让我们的整个页面在一屏内呈现出来。容器的溢出属性也要设置为hidden，以保证页面的滚动不会出现异常。

接着，我们需要把页面划分成一些小的部分，每一部分的高度也设置为视窗的高度。每一部分都使用相对定位进行定位，以便我们在后面实现整体滚动的时候方便改变其位置。此外，为了让整个页面更加炫酷，我们还可以为奇数部分和偶数部分分别设置不同的背景色。

最后，我们需要添加一些JavaScript代码，让页面可以响应用户的滚动操作，从而实现整体滚动的效果。我们可以使用classList属性来添加和移除一个元素的类名，来控制其样式，从而实现整体滚动的效果。