간단한 시차 스크롤 효과를 만드는 방법

게시 됨: 2017-09-08

이 튜토리얼에서는 정지된 배경과 스크롤링 콘텐츠를 사용하여 가장 간단한 방법으로 아름다운 시차 스크롤링 효과를 살펴봅니다.

소스 파일 다운로드 데모 보기

간략한 소개

시차는 다른 위치에서 볼 때 물체의 위치가 다르게 보이는 효과입니다. 시차 모션 또는 우리의 경우 시차 스크롤은 같은 시선에 있지만 거리가 있는 두 물체가 다른 속도로 움직이는 것처럼 보이는 환상을 줍니다. 고속도로를 시속 100km로 운전하면서 차창 밖을 내다본 적이 있다면 전봇대가 빠른 속도로 지나가는 것처럼 보이는 반면 배경에 있는 산들은 정말 천천히 지나가는 것처럼 보입니다. , 거의 정지 상태에 있습니다. 이것은 작동 중인 시차 모션입니다.

웹이 진행되는 한 배경 이미지와 텍스트가 위에 있는 컨테이너에 시차 효과를 유발할 수 있습니다. 가장 간단한 형태로 시차 스크롤은 콘텐츠가 정상적으로 스크롤되도록 하고 배경은 고정된 상태로 유지합니다. 가장 단순한 형태의 이 기술의 장점은 CSS만 필요하다는 것입니다. 파헤쳐 봅시다.

마크업 및 구조

응답하지 않는 고정 사이트가 있다면 이를 달성하기 위한 속임수가 없을 것입니다. 우리는 반응형 웹 디자인의 시대에 살고 있으므로 이제 그만입니다. 두려워하지 마십시오! 우리가 사용할 수 있는 멋진 CSS가 있습니다. 그러나 먼저 몇 가지 마크업을 살펴보십시오. 마크업은 간단합니다. 최대 효과를 위해 배경/제목 텍스트 sections 과 콘텐츠 sections 을 번갈아 사용합니다. 다음과 같이 보입니다.


  
    고요한
  



  
    로렘 입숨 돌로르
    Lorem ipsum dolor sitmet, consectetur adipisicing elit...
  



  
    증가
  



  
    로렘 입숨 돌로르
    Lorem ipsum dolor sitmet, consectetur adipisicing elit...
  



  
    침착 한
  



  
    로렘 입숨 돌로르
    Lorem ipsum dolor sitmet, consectetur adipisicing elit...

parallax 클래스가 있는 각 section 에는 배경 이미지와 제목 텍스트가 포함되고 content 클래스가 있는 각 section 은 단순한 콘텐츠 포함 섹션이 됩니다. container 클래스는 최대 너비의 유동 div이므로 모든 응답이 매우 간단합니다. 이제 CSS를 파헤쳐 보겠습니다.

스타일 지정 및 CSS와 함께 작동하게 만들기

주목해야 할 첫 번째 요점은 모든 배경 이미지의 width 가 1600픽셀이고 height 가 600픽셀이라는 것입니다. 이를 통해 시차 섹션을 600px의 고정 높이로 설정할 수 있습니다. 그것보다 조금 더 있습니다. 나는 반복되는 배경을 원하지 않기 때문에(나는 크고 굵은 이미지를 사용하고 있다), 나는 항상 사용자가 최대 너비에 있을 것이라고 기대할 수는 없다. 운 좋게도 CSS background-size 속성을 활용하여 cover 로 설정할 수 있습니다. 이렇게 하면 배경 이미지가 비례적으로 확장되어 사용 가능한 총 공간을 차지하게 됩니다. 최대 지원을 위해서는 접두어가 필요하므로 이를 염두에 두십시오.

지금까지 가장 중요한 것을 제외하고는 너무 좋습니다. 콘텐츠가 스크롤되는 동안 배경 이미지가 고정된 상태를 유지해야 합니다. 다시 말하지만, CSS는 우리의 삶을 쉽게 만듭니다. background-attachment 속성을 활용하고 fixed 로 설정합니다. 단순한! 다음은 몇 가지 예시 미디어 쿼리가 포함된 내 CSS의 모습입니다.

 /* ================================================== =============
  기본 구조
==================================================== =========== */
.컨테이너 {
  최대 너비: 960px;
  여백: 0 자동;
}
/* ================================================== =============
  섹션
==================================================== =========== */
section.module:마지막 자식 {
  여백-하단: 0;
}
섹션.모듈 h2 {
  여백-하단: 40px;
  font-family: "Roboto Slab", serif;
  글꼴 크기: 30px;
}
섹션.모듈 p {
  여백-하단: 40px;
  글꼴 크기: 16px;
  글꼴 두께: 300;
}
section.module p: 마지막 자식 {
  여백-하단: 0;
}
섹션.모듈.콘텐츠 {
  패딩: 40px 0;
}
섹션.모듈.시차 {
  높이: 600px;
  배경 위치: 50% 50%;
  background-repeat: 반복 없음;
  배경 첨부: 고정;
  배경 크기: 표지;
}
section.module.parallax h1 {
  색상: rgba(255, 255, 255, 0.8);
  글꼴 크기: 48px;
  줄 높이: 600px;
  글꼴 두께: 700;
  텍스트 정렬: 가운데;
  텍스트 변환: 대문자;
  텍스트 그림자: 0 0 10px rgba(0, 0, 0, 0.2);
}
section.module.parallax-1 {
  배경 이미지: url("../img/demo/_small/1.jpg");
}
section.module.parallax-2 {
  배경 이미지: url("../img/demo/_small/2.jpg");
}
section.module.parallax-3 {
  배경 이미지: url("../img/demo/_small/3.jpg");
}

@media all 및 (최소 너비: 600px) {
  섹션.모듈 h2 {
    글꼴 크기: 42px;
  }
  섹션.모듈 p {
    글꼴 크기: 20px;
  }
  section.module.parallax h1 {
    글꼴 크기: 96px;
  }
}
@media all 및 (최소 너비: 960px) {
  section.module.parallax h1 {
    글꼴 크기: 160px;
  }
}

브라우저 지원 및 속성 정보

일반적으로 브라우저 지원은 정말 훌륭합니다. IE8 이하에서는 background-size 속성을 지원하지 않지만 간단한 조건부 스타일이 이를 처리해야 합니다. 그 외에도 모든 것이 지원되며 문제가 없어야 합니다. 이 튜토리얼에서 사용된 CSS 속성에 대한 자세한 정보는 MDN을 확인하세요.

배경 위치 – MDN 참조
배경 크기 – MDN 참조
백그라운드 첨부 – MDN 참조

마무리

여기에서 우리는 단순하고 효과적이며 일반적인 모든 것을 한 번에 스크롤하는 모양과 약간 다른 것을 구현했습니다. 우리는 우리가 원하는 효과를 얻기 위해 훌륭하지만 덜 알려진 CSS 기술을 활용했습니다. 그리고 그것은 포장입니다! 잊지 마세요. 아래 링크를 클릭하여 데모를 보고 소스를 다운로드할 수 있으며 질문, 의견 또는 피드백이 있는 경우 아래에 남길 수도 있습니다.