어떻게 만들지: 비주얼 파라다이스 스크롤

CSS를 사용하여 '비주얼 파라다이스' 스크롤 효과를 배우는 방법을 학습하세요。

파라럭스 스크롤 효과를 생성하는 방법

컨테이너 요소를 사용하여 특정 높이의 배경 이미지를 추가합니다. 그런 다음, 다음과 같이 사용합니다: background-attachment: fixed 실제 파라럭스 효과를 생성합니다. 다른 배경 속성은 이미지를 정중앙에 배치하고 완벽하게 확대하는 데 사용됩니다:

픽셀 단위로 사용하는 예시

<style>
.parallax {
  /* 사용된 이미지 */
  background-image: url("img_parallax.jpg");
  /* 특정 높이 설정 */
  min-height: 500px;
  /* 파라럭스 스크롤 효과를 생성합니다 */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
/* 컨테이너 요소 */
<div class="parallax"></div>

본인이 직접 시험해 보세요

위 예시에서는 픽셀로 이미지 높이를 설정합니다. 전체 화면에 맞추기 위해 예를 들어 100%를 사용하려면, 파라럭스 컨테이너의 높이를 100%로 설정해야 합니다. 주의事项: 또한 다음과 같이 설정해야 합니다: height: 100% HTML과 body에 적용됩니다:

단위로 사용하는 예시

body, html {
  height: 100%;
}
.parallax {
  /* 사용된 이미지 */
  background-image: url("img_parallax.jpg");
  /* 전체 높이 */
  height: 100%;
  /* 파라럭스 스크롤 효과를 생성합니다 */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

본인이 직접 시험해 보세요

일부 모바일 장치에서는 background-attachment: fixed 이 때 문제가 발생할 수 있습니다. 그러나, 모바일 장치에서 파라럭스 효과를 끌 수 있는 미디어 쿼리를 사용할 수 있습니다:

예시

/* 모든 태블릿과 스마트폰의 파라럭스 스크롤을 끄습니다. 필요하다면 픽셀을 추가/감소할 수 있습니다 */
@media only screen and (max-device-width: 1366px) {
  .parallax {
    background-attachment: scroll;
  }
}

본인이 직접 시험해 보세요

위 코드에서 화면 너비가 1366 픽셀 이하이거나 같을 때, 파라럭스 스크롤 효과가 꺼집니다. 이는 대부분의 태블릿과 스마트폰에 적용됩니다. 이는 다음과 같이 변경하여 이루어집니다: .parallax 의 background-attachment 속성에서 fixed 도 스크롤 이를 통해 배경 이미지는 페이지의 나머지 부분과 함께 스크롤됩니다. 그렇지 않으면, 뷰 포트에 고정됩니다.