原生banner

最新推荐文章于 2024-10-08 10:16:40 发布

"*smile*"

最新推荐文章于 2024-10-08 10:16:40 发布

阅读量212

点赞数 2

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/qq_50853940/article/details/137646377

版权

本文介绍了如何使用HTML、CSS和JavaScript实现在网页上平滑地切换三个内容区域，每个区域在滚动时逐渐升起或下降，形成无缝滚动效果。通过监听`wheel`事件，控制内容的CSS`transform`属性实现动画效果。

摘要由CSDN通过智能技术生成

效果：

某个页面有3个内容，这3个内容都分别能撑满整个屏幕，默认显示第一屏的内容；如果当前是第一屏，向下滚动鼠标，第一屏的内容不滚动，第二屏的内容缓缓升起，覆盖住第一屏的内容；然后再向下滚动鼠标，第2屏的内容不滚动，第3屏的内容缓缓升起，覆盖住第2屏的内容；然后再向上滚动鼠标，第2屏内容不动，第3屏缓缓下降出屏幕范围，随着第3屏的下降缓缓显露出第2屏；然后再向上滚动鼠标，第1屏内容不动，第2屏缓缓下降出屏幕范围，随着第2屏的下降缓缓显露出第1屏；在内容移动的时候，滚动鼠标不生效，只有内容移动完成后，滚动鼠标才会生效

html

<div class="banner">
    <div class="section section1 active">Section 1</div>
    <div class="section section2 ">Section 2</div>
    <div class="section section3 ">Section 3</div>
</div>

css

body, html {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.banner {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 5rem;
    transition: transform 1.5s ease;
    z-index: 1;
    transform: translateY(0);
}

.active {
    z-index: 2;
}
.section1 {
    transform: translateY(0);
    background: green;
}

.section2 {
    transform: translateY(100%);
    background: yellow;
}

.section3 {
    transform: translateY(100%);
    background: #00a2d4;
}

document.addEventListener('DOMContentLoaded', function() {
	let currentSection = 1;
	let isTransitioning = false; // 添加一个标志来表示切换是否正在进行中
	const numSections = document.querySelectorAll('.section').length;

	window.addEventListener('wheel', function(event) {
		// 当切换正在进行中时，忽略滚动事件
		if (isTransitioning) return;

		const moveScreen = event.deltaY > 0 ? currentSection : currentSection -1;
		if (moveScreen >= 1 && moveScreen <= numSections) {
			// 设置切换进行中标志为 true
			isTransitioning = true;
			if (event.deltaY > 0 && currentSection < numSections) {
				currentSection++;
			} else if (event.deltaY < 0 && currentSection > 1) {
				currentSection--;
			}
			updateSections(moveScreen, event.deltaY > 0 ? "up" : "down");
			// 在切换完成后，将切换进行中标志重置为 false
			setTimeout(() => {
				isTransitioning = false;
			}, 1500); // 此处的延迟时间应该与 CSS 中的 transition 时间一致
		}
	});

	function updateSections(targetScreen, direction) {
		const sections = document.querySelectorAll('.section');
		sections.forEach((section, index) => {
			if (index === targetScreen) {
				const translateYValue = direction==="up"? '0': '100%';
				section.style.transform = 'translateY(' + translateYValue + ')';
				section.classList.add('active');
			}
		});
	}
});