집 > 기사 > 웹 프론트엔드 > CSS3를 사용하여 스크롤 시차 효과 얻기

CSS3를 사용하여 스크롤 시차 효과 얻기

不言원래의: 2018-06-25 16:23:081822검색

이 글에서는 CSS3를 사용하여 스크롤 시차 효과를 구현하는 튜토리얼을 주로 소개합니다. 주로 background-attachment 속성이 필요한 친구들이 참고할 수 있습니다.

이제 "시차" 효과가 점점 인기를 얻고 있습니다. 인터넷. 시차 효과에 대해 들어본 적이 없다면 실제로는 사진을 사용하여 다양한 레이어를 형성하고 다양한 속도와 방향으로 이동하여 생성되는 효과입니다. 이는 시청자의 관심을 효과적으로 끌 수 있는 놀라운 시각적 효과를 만들어냅니다.

웹 디자인에서 시차 효과를 얻는 가장 일반적인 방법은 jQuery 플러그인을 사용하는 것입니다. 그러나 이 접근 방식에는 몇 가지 단점이 있습니다. 이러한 플러그인의 대부분은 창 개체의 스크롤 이벤트에 리스너를 배치합니다. 이로 인해 JavaScript는 수많은 이벤트 트리거를 처리하게 됩니다. (스크롤 이벤트를 처리하면 브라우저 성능 문제가 발생할 수 있으므로 사용 시 매우 주의해야 합니다.) 다양한 레이어 이동, 배경 위치 계산, 속성 설정 이미지의 모든 문제는 DOM 조작에 많은 문제를 야기합니다.

간단히 말하면, 시차 효과를 얻기 위해 JavaScript를 사용하면 성능 문제가 발생하고 페이지 스크롤이 지연됩니다.

Background-attachment 속성 검토
Background-attachment - 배경 이미지가 스크롤 축과 함께 이동하는 방식 정의
값: 스크롤 | 고정 | 상속
scroll: 배경 이미지가 페이지의 스크롤 축과 함께 이동
고정 : 페이지 스크롤 축의 배경 이미지는 이동하지 않습니다
inherit: 상속
초기값: 스크롤
상속: no
적용 대상: 모든 요소
배경: background.attachment: attachment.
예

body    
{   
 background-image:url(&#39;list-orange.png&#39;);   
 background-attachment:fixed;   
 background-repeat:repeat-x;   
 background-position:center center;   
}

화면의 배경 이미지는 주황색 선입니다. 스크롤 축이 이동해도 주황색 선의 시각적 위치는 변경되지 않습니다.
CSS 배경 첨부 속성 예

시차 효과를 얻으려면 배경 첨부 사용: 고정

왜 소수의 사람들만이 이것을 아는가? 이 효과는 실제로 CSS를 사용하여 얻을 수 있습니다.

시차 효과를 얻으려면 여러 배경 이미지를 서로 다른 요소에 배치해야 합니다. 이러한 배경 이미지는 background-attachment:fixed로 정의되어야 합니다. 배경 첨부를 설정하면 배경 이미지의 효과와 위치를 변경할 수 있습니다.

background-attachment의 기본값은 스크롤입니다. 이는 배경 이미지와 콘텐츠의 위치가 상대적으로 정적이라는 것을 의미합니다. 우리 모두는 웹페이지를 위아래로 스크롤할 때 배경과 콘텐츠가 함께 스크롤되는 것을 본 적이 있습니다.

배경 첨부가 고정으로 설정되면 상황이 흥미로워집니다. 고정이란 배경 이미지가 콘텐츠와 함께 스크롤되지 않고 창과 함께 고정되어 있음을 의미합니다. 즉, 스크롤 막대를 드래그해도 배경 이미지는 변경되지 않습니다. 이것은 아름다운 시차 효과를 만들어냅니다.

실제 구현을 살펴보겠습니다.

<!-- Four containers for setting the background images -->   
<p class="parallax">   
  <p class="bg__foo">foo</p>   
  <p class="bg__bar">bar</p>   
  <p class="bg__baz">baz</p>   
  <p class="bg__bazz">bazz</p>   
</p>   
// setting base styles to image containers   
[class*="bg__"] {   
  height: 50vh;   
  text-indent: -9999px;   
  /* fix background */
  background-attachment: fixed;   
  /* center it */
  background-position: center center;   
  /* Scale it nicely to the element */
  background-size: cover;   
  /* just make it look a bit better  */
  &:nth-child(2n) {   
    box-shadow: inset 0 0 1em #111;   
  }   
}   
.bg__foo {   
  background-image: url(   
    http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax1.jpg   
  );   
}   
.bg__bar {   
  background-image: url(   
    http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax2.jpg   
  );   
}   
.bg__baz {   
  background-image: url(   
    http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax3.jpg   
  );   
}   
.bg__bazz {   
  height: 100vh;   
  background-image: url(   
    http://www.webhek.com/wordpress/wp-content/uploads/2014/07/parallax1.jpg   
  );   
}

이 기술의 브라우저 호환성에 대해서는 여기를 참조하세요. 기본적으로 최신 브라우저와 IE9+ 브라우저가 지원합니다.

개인적으로는 JavaScript를 사용하는 것보다 CSS 기술로 구현되는 시차 효과를 더 선호합니다. CSS를 사용하여 구현되며 브라우저에서 기본적으로 지원됩니다. DOM에 대한 프로그래밍 논리나 추가 작업이 없으므로 전체 솔루션이 매우 간단하고 아름답습니다.

CSS에서 구현한 시차 효과조차 브라우저에 부담을 주게 됩니다.

Background-attachment: 수정하면 브라우저가 더 많이 렌더링되고 브라우저 스크롤 효율성에도 영향을 미칩니다. 따라서 성능에 따른 효과를 확인하려면 개발 중에 더 많은 테스트를 수행해야 합니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

CSS3를 사용하여 스크롤 시차 효과 얻기

관련 기사