[分享]css全屏滚动特效代码

在网页设计中，全屏滚动效果可以为页面带来更加生动的展示效果，增强用户体验，同时提升页面美感。而在CSS中，可以通过一些简单的代码实现全屏滚动效果，下面就为大家介绍一下。首先，在HTML标记中，需要创建...

在网页设计中，全屏滚动效果可以为页面带来更加生动的展示效果，增强用户体验，同时提升页面美感。而在CSS中，可以通过一些简单的代码实现全屏滚动效果，下面就为大家介绍一下。
首先，在HTML标记中，需要创建一个容器并将各个页面放入其中，如下所示：

<div class="wrapper">

  <section class="section1">页面1</section>

  <section class="section2">页面2</section>

  <section class="section3">页面3</section>

</div> 

可以看到，我们创建了一个名为wrapper的容器，并在其中放入了三个名为section1、section2和section3的页面。
接下来，在CSS中，需要给wrapper容器设置一些基本样式，如下所示：

.wrapper {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
} 

这里我们将wrapper容器设置为相对定位，并设置其宽度和高度均为100vw/vh，即占满整个可视窗口的大小。同时，我们将其overflow属性设置为hidden，以便隐藏容器内部的内容。
接下来，我们需要为每一个页面设置样式，如下所示：

.section1, .section2, .section3 {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transition: all 1s ease-in-out;
} 

这里我们将每个页面设置为绝对定位（即相对于wrapper容器定位），并设置其宽度和高度同样为100%。同时，我们将它们的top和left属性分别设置为0，以保证它们占满整个wrapper容器。最后，我们设置了一个过渡效果，以在页面切换时实现平滑过渡。
最后，我们还需要通过JavaScript来实现页面滚动效果。我们可以监听鼠标滚轮事件，以在用户滚动鼠标时切换页面。具体代码如下所示：

document.addEventListener('mousewheel', function(event) {
  event.preventDefault();
  if (event.deltaY < 0) {
    // 向上滚动
    currentPage--;
  } else {
    // 向下滚动
    currentPage++;
  }
  changePage(currentPage);
});

function changePage(pageIndex) {
  var wrapper = document.querySelector('.wrapper');
  var sections = document.querySelectorAll('section');
  if (pageIndex < 0) {
    pageIndex = 0;
  }
  if (pageIndex >= sections.length) {
    pageIndex = sections.length - 1;
  }
  wrapper.style.transform = 'translate3d(0, -' + pageIndex * 100 + '%, 0)';
} 

可以看到，在mousewheel事件监听中，我们判断鼠标滚轮的方向，并根据用户的滚动输入，更新currentPage变量的值。随后，我们调用了名为changePage的函数，将当前页面切换到用户滚动输入所对应的页面。
在changePage函数中，我们首先通过选择器找到了wrapper容器和内部的所有页面，随后判断currentPage是否越界，最后通过CSS的transform属性将wrapper容器在Y轴上移动到对应的页面处，以实现页面切换效果。
最后，我们就成功地实现了全屏滚动效果。这种方法简单易懂，代码量也不大，同时在实现效果上也相当出色，非常适合用于网页设计中。