CSS로 시차 스크롤 효과를 만들려면 코드는 다음과 같습니다. -
예시
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
height: 100vh;
margin: 0px;
padding: 0px;
}
.parallax {
background-image: url("https://i.picsum.photos/id/250/800/800.jpg");
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.parallaxText {
font-size: 20px;
height: 100%;
}
</style>
</head>
<body>
<div class="parallax"></div>
<div class="parallaxText">
<h1>Some random text</h1>
<h1>Some random text</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere, praesentium assumenda
illum nisi minima libero accusamus adipisci aspernatur architecto qui aliquam quo similique
eos vitae. Cum iste laboriosam vero excepturi eum sed ex fuga repellat accusantium officia
rerum ducimus sequi maiores reprehenderit veniam corrupti, aspernatur explicabo nesciunt
architecto voluptate! Consectetur.
</p>
</div>
<div class="parallax"></div>
</body>
</html> 출력
위의 코드는 다음과 같은 출력을 생성합니다 -
약간 아래로 스크롤하면 다음과 같이 시차 효과를 볼 수 있습니다 -
