방법 - 시차 스크롤링
CSS로 "시차" 스크롤 효과를 만드는 방법을 알아보세요.
시차
시차 스크롤은 스크롤하는 동안 배경 콘텐츠(즉, 이미지)가 전경 콘텐츠와 다른 속도로 이동하는 웹 사이트 추세입니다. 시차 스크롤이 있는 웹사이트와 없는 웹사이트의 차이점을 보려면 아래 링크를 클릭하십시오.
참고: 시차 스크롤이 모바일 장치/스마트폰에서 항상 작동하는 것은 아닙니다. 그러나 미디어 쿼리를 사용하여 모바일 장치에 대한 효과를 끌 수 있습니다(이 페이지의 마지막 예 참조).
시차 스크롤 효과를 만드는 방법
컨테이너 요소를 사용하고 특정 높이의 컨테이너에 배경 이미지를 추가합니다. 그런 다음 를 사용 background-attachment: fixed
하여 실제 시차 효과를 만듭니다. 다른 배경 속성은 이미지를 완벽하게 중앙에 맞추고 크기를 조정하는 데 사용됩니다.
픽셀이 있는 예
<style>
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");
/* Set
a specific height */
min-height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position:
center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<!-- Container element
-->
<div class="parallax"></div>
위의 예에서는 픽셀을 사용하여 이미지의 높이를 설정했습니다. 퍼센트(예: 100%)를 사용하여 이미지를 전체 화면에 맞추려면 시차 컨테이너의 높이를 100%로 설정합니다. 참고:height: 100%
<html> 및 <body> 에도 적용해야 합니다 .
백분율이 있는 예
body, html {
height: 100%;
}
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");
/* Full height */
height: 100%;
/* Create the parallax
scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat:
no-repeat;
background-size: cover;
}
일부 모바일 장치에는 에 문제가 background-attachment: fixed
있습니다. 그러나 미디어 쿼리를 사용하여 모바일 장치에 대한 시차 효과를 끌 수 있습니다.
예시
/* Turn off parallax scrolling for all tablets and phones. Increase/decrease the pixels if
needed */
@media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}