배경 콘텐츠와 전경 콘텐츠에 서로 다른 속도를 지정하여 CSS를 사용하여 시차 스크롤 효과를 만들 수 있습니다.
다음 예는 CSS 시차 스크롤 효과를 보여줍니다 -
예시
<!DOCTYPE html>
<html>
<head>
<style>
body, html {
height: 100%;
text-align: center;
}
.example {
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#demo {
background: url("https://images.unsplash.com/photo-1612698565524- 1101522e9a21?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixlib=rb1.2.1&q=80&w=800");
}
#dist {
height:150px;
background-color: rgba(102,234,99,0.5);
padding: 2%;
}
#d2 {
background: url("https://images.unsplash.com/photo-1611489473774-5d881f1153f1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixlib=rb1.2.1&q=80&w=800");
}
</style>
</head>
<body>
<div id="demo" class="example"></div>
<div id="dist">
Sed a porttitor enim. Integer euismod dui massa, at posuere sem fermentum at. Fusce vehicula
fringilla tortor, ut mattis sapien tristique ac. Phasellus eleifend malesuada orci, et facilisis arcu
egestas vel. Duis in tempus libero. Nunc nibh arcu, tempus quis lectus ut, blandit tincidunt felis. Suspendisse potenti.
</div>
<div id="d2" class="example"></div>
</body>
</html> 출력
이것은 다음 결과를 생성합니다 -
