css3 滑动页面就呈现

CSS3提供了一种非常酷的效果，可以在滑动页面时让页面呈现出不同的效果。这种效果不仅可以提高页面的互动性和趣味性，还可以为用户带来更加流畅的浏览体验。

body {
    overflow: hidden;
}
.slide {
    display: flex;
    height: 100vh;
    width: 100vw;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 1s ease-in-out;
}
.slide-1 {
    background-color: blue;
    transform: translateX(0);
}
.slide-2 {
    background-color: green;
    transform: translateX(100vw);
}
.slide-3 {
    background-color: red;
    transform: translateX(200vw);
}
.slide-4 {
    background-color: orange;
    transform: translateX(300vw);
}
    

以上代码是实现这种效果的基本样式代码，需要结合JavaScript来实现滑动效果。在滑动事件中，只需要通过改变CSS属性来改变页面的呈现效果。

let currentIndex = 0;
    document.addEventListener('wheel', event =>
 {
    const delta = event.wheelDelta;
    const slides = document.querySelectorAll('.slide');
    if(delta >
     0 &
    &
     currentIndex >
 0){
    currentIndex--;
}
    else if(delta  0 &
    &
 currentIndex  slides.length - 1){
    currentIndex++;
}
    slides.forEach((slide, index) =>
 {
if(index === currentIndex){
    slide.style.transform = 'translateX(0)';
}
else{
slide.style.transform = `translateX(${
100 * (index - currentIndex)}
    vw)`;
}
}
    );
}
    );
    

以上JavaScript代码实现了鼠标滚轮事件监听，当滚轮向上滚动时，页面向左滑动，当前页面减少一格，当滚轮向下滚动时，页面向右滑动，当前页面增加一格。

通过结合CSS3和JavaScript技术，我们可以实现一些非常炫酷的滑动效果，提升页面的用户体验和交互性。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！