制作全屏滚动页面可以通过CSS和一些JavaScript来实现。以下是一个简单的示例:
HTML结构:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全屏滚动页面</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="section section1">
<h1>第一部分</h1>
</div>
<div class="section section2">
<h1>第二部分</h1>
</div>
<div class="section section3">
<h1>第三部分</h1>
</div>
</div>
<script src="scripts.js"></script>
</body>
</html>
CSS样式 (styles.css):
body, html {
margin: 0;
padding: 0;
overflow: hidden;
}
.container {
width: 100%;
height: 100%;
overflow: hidden;
}
.section {
width: 100%;
height: 100vh; /* 设置每个部分的高度为视口高度 */
display: flex;
justify-content: center;
align-items: center;
}
.section1 {
background-color: #f1c40f;
}
.section2 {
background-color: #3498db;
}
.section3 {
background-color: #2ecc71;
}
h1 {
color: #fff;
font-size: 3em;
}
JavaScript代码 (scripts.js):
document.addEventListener('DOMContentLoaded', function() {
var sections = document.querySelectorAll('.section');
var index = 0;
var totalSections = sections.length;
window.addEventListener('wheel', function(e) {
if (e.deltaY > 0 && index < totalSections - 1) {
index++;
} else if (e.deltaY < 0 && index > 0) {
index--;
}
scrollToSection(index);
});
function scrollToSection(index) {
sections.forEach(function(section, i) {
section.style.transform = 'translateY(' + (-100 * index) + 'vh)';
});
}
});
在这个例子中,我们有一个HTML结构,其中包含三个部分(section1、section2和section3),每个部分都包含一个标题。CSS样式用于设置页面的基本样式和每个部分的样式,使其占据整个视口高度。JavaScript代码监听滚轮事件,根据滚轮滚动的方向和位置来切换部分,并使用translateY CSS属性来实现滚动效果。
这只是一个基本的示例,你可以根据需求对页面的样式和功能进行扩展和定制,例如添加动画效果、导航菜单等。
版权属于:泽泽社长
本文链接:https://blog.zezeshe.com/archives/using-css-1.html
本站未注明转载的文章均为原创,并采用
CC BY-NC-SA 4.0 授权协议,转载请注明来源,谢谢!