HTML+CSS+JQuery全屏滚动特效完整源码附注释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全屏滚动特效</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
}
section {
width: 100%;
height: 100vh;
scroll-snap-align: start; /* 对齐滚动容器的开始 */
}
.scroll-snap-type-container {
scroll-snap-type: y mandatory; /* 指定滚动方向和强制一致的滚动对齐 */
height: 100%;
overflow: auto;
}
.scroll-snap-type-container > div {
scroll-snap-align: start; /* 对齐滚动容器的开始 */
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 20vh;
color: white;
}
.scroll-snap-type-container > div:nth-child(1) {
background-color: #f5f5f5; /* 浅灰色背景 */
}
.scroll-snap-type-container > div:nth-child(2) {
background-color: #ffe6e6; /* 浅粉色背景 */
}
.scroll-snap-type-container > div:nth-child(3) {
background-color: #e8f5e9; /* 浅绿色背景 */
}
.scroll-snap-type-container > div:nth-child(4) {
background-color: #e3e8f1; /* 浅蓝色背景 */
}
</style>
</head>
<body>
<div class="scroll-snap-type-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>这段代码使用了CSS的scroll-snap-type属性和scroll-snap-align属性来创建一个简单的全屏滚动特效。每个div代表一个全屏的“页面”，用户可以滚动浏览。这个示例展示了如何利用CSS为网页创建更平滑的滚动体验。
评论已关闭