监听滚动缓动特效

插眼记录
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		body {

			/* 让页面足够长，能产生滚动效果 */
			margin: 0;
			padding: 0;
		}
		
		.box {
			width: 100%;
			height: 300px;
			background-color: #4CAF50;
			transition: width 0.3s linear, border-radius 0.3s linear;
			/* 动画过渡 */
			margin: 100px auto;
		}
		
		.content {
			width: 100%;
			text-align: center;
			line-height: 300px;
			color: white;
			font-size: 24px;
			border-radius: 10px;
		}
		.container {
			display: flex;
			flex-direction: column;
			gap: 20px;
			margin: 30px 100px;
		}

		.item {
			opacity: 0;
			transform: translateY(30px);
			transition: opacity 1s ease, transform 1s ease;
			background-color: #4CAF50;
			color: white;
			padding: 140px;
			border-radius: 5px;
			text-align: center;
			font-size: 20px;
			margin-bottom: 20px;
		}

		.item2 {
			opacity: 0;
			transform: translateX(-100px);
			transition: opacity 1s ease, transform 1s ease;
			background-color: #4CAF50;
			color: white;
			padding: 140px;
			border-radius: 5px;
			text-align: center;
			font-size: 20px;

		}

		.item2,
		.item3 {
			flex: 1;
			margin-bottom: 20px;
		}

		.item3 {
			opacity: 0;
			transform: translateX(100px);
			transition: opacity 1s ease, transform 1s ease;
			background-color: #4CAF50;
			color: white;
			padding: 140px;
			border-radius: 5px;
			text-align: center;
			font-size: 20px;
		}

		.item.visible {
			opacity: 1;
			transform: translateY(0);
		}

		.item2.visible,
		.item3.visible {
			opacity: 1;
			transform: translateX(0);
		}
	</style>
	<body>
		
		<div class="container">
			
			<div class="item">Item 1</div>
			<div class="item">Item 2</div>
			<div class="box">
				<div class="content">Scroll me!</div>
			</div>
			<div style="display: flex;justify-content: space-between;gap:0 20px;">
				<div class="item2">Item 3</div>
				<div class="item3">Item 4</div>
			</div>

			<div class="item">Item 5</div>
			<div class="item">Item 6</div>

			<div style="display: flex;justify-content: space-between;gap:0 20px;">
				<div class="item2">Item 7</div>
				<div class="item3">Item 8</div>
			</div>

			<div class="item">Item 9</div>
			<div class="item">Item 10</div>
		</div>

	</body>
	<script>
		const observerFun = () => {
			return new IntersectionObserver((entries, observer) => {
				entries.forEach(entry => {
					const element = entry.target;
					const isVisible = entry.isIntersecting;
					if (isVisible && !element.classList.contains('visible')) {
						// 当元素进入视图且没有 visible 类时，添加 visible 类
						element.classList.add('visible');
					} else if (!isVisible && element.classList.contains('visible')) {
						// 当元素离开视图且有 visible 类时，移除 visible 类
						element.classList.remove('visible');
					}
				});
			}, {
				// threshold: 0.5, // 默认是0
			});
		}
		
		const observer3=observerFun()
		// 获取所有item元素并观察它们
		const items = document.querySelectorAll('.item, .item2,  .item3');
		items.forEach(item => {
			observer3.observe(item);
		});
		
		// observer.disconnect();停止观察，放在销毁的生命周期中
		
		
		const box = document.querySelector('.box');
		const maxScroll = 900; // 控制效果变化的最大滚动距离
		const maxRadius = 40; // 最大圆角半径（50%）
		const minWidth = 85; // 最小宽度（50%）
		const scrollThreshold = 120; // 滚动位置的阈值
		
		// 处理滚动效果
		const handleScroll = () => {
			const scrollPosition = window.scrollY; // 获取当前的滚动位置
			console.log(scrollPosition)
			// 只有在滚动位置大于阈值时才进行更新
			if (scrollPosition >= scrollThreshold) {
				const scrollPercentage = Math.min((scrollPosition - scrollThreshold) / maxScroll, 1); // 控制比例不超过 1
				const borderRadius = maxRadius * scrollPercentage; // 根据比例计算圆角
				const width = Math.max(100 - (scrollPercentage * (100 - minWidth)), minWidth); // 根据比例计算宽度
		
				box.style.borderRadius = `${borderRadius}px`;
				box.style.width = `${width}%`;
			} else {
				// 如果滚动回到阈值以下，恢复初始状态
				box.style.borderRadius = '0px';
				box.style.width = '100%';
			}
		};
		
		// 为滚动事件绑定监听器
		window.addEventListener('scroll', handleScroll);
		
		// 移除滚动事件监听
		// const removeScrollListener = () => {
		//     window.removeEventListener('scroll', handleScroll);
		// };
	</script>

</html>
posted on 2025-02-25 11:18 最帅爸爸阅读(9) 评论(0) 收藏举报