console
<!DOCTYPE html>
<html>
<head>
<title>Parallax Scrolling Demo</title>
<style type="text/css">
.container {
line-height: 750px;
color: white;
}
.bg {
width: 100%;
height: 100vh;
background-image: url('https://picsum.photos/id/238/1920/1080');
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
.bg2 {
width: 100%;
height: 100vh;
background-image: url('https://images.pexels.com/photos/2437299/pexels-photo-2437299.jpeg');
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
.devide {
height: 100vh;
background: rgba(0, 0, 0, .7);
line-height: 80vh;
text-align: center;
}
.title {
font-size: 60px;
font-weight: bold;
text-shadow: 3px 3px 15px rgba(0, 0, 0, 0.5);
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="bg">
<div class="title">Parallax Scrolling Demo1</div>
</div>
<div class='devide title'>devide</div>
<div class="bg2">
<div class="title">Parallax Scrolling Demo2</div>
</div>
</div>
</body>
</html>