css 스크롤 시차 구현, 적라 쿨~

시차 롤링(Parallax Scrolling)은 여러 층의 배경을 서로 다른 속도로 움직여 입체적인 운동 효과를 형성하여 매우 뛰어난 시각적 체험을 가져오는 것을 말한다.웹 디자인의 핫이슈 추세로서 점점 더 많은 웹 사이트들이 이 기술을 응용하였다.일반적으로 스크롤 시차는 앞에서 자바스크립트를 보조해야만 실현할 수 있다.물론 CSS는 스크롤 시차 효과를 실현하는 데도 탁월한 능력을 가지고 있다.
오늘 주로 사용하는 속성은:background-attachment
백그라운드-image를 지정하면 백그라운드-attachment는 배경이 뷰포트에 고정되어 있는지 아니면 그 블록을 포함하는 블록에 따라 굴러다니는지 결정한다.
매개 변수:scroll,local,fixed
background-attachment: scroll
scroll 이 키워드는 내용을 따라 스크롤하지 않고 배경이 요소 자체에 의해 고정되어 있음을 나타냅니다.
background-attachment: local
local 이 키워드는 배경이 요소의 내용과 고정되어 있음을 나타냅니다.만약 원소가 스크롤 메커니즘을 가지고 있다면 배경은 원소의 내용에 따라 스크롤되고 배경의 그리기 구역과 포지셔닝 구역은 스크롤 가능한 구역과 비교되며, 그들의 경계선을 포함하지 않습니다.
background-attachment: fixed
fixed 이 키워드는 뷰포트에 대해 배경이 고정되어 있음을 나타냅니다.원소가 스크롤 메커니즘을 가지고 있어도 배경은 원소의 내용에 따라 스크롤되지 않는다.
여기서 우리는 그림과 글을 혼합하여 배열하는 방식으로 스크롤 시차를 실현한다. HTML 구조는 다음과 같다.g-word는 내용 구조를 나타낸다.g-img은 배경 그림 구조를 나타냅니다.

Header
IMG1
Content1
IMG2
Content2
IMG3
Footer

css 스타일

section {
    height: 100vh;
}

.g-img {
    background-image: url(...);
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
}

우리는 위의 백그라운드-attachment:fixed를 주석하거나 백그라운드-attachment:local로 바꾸어 효과를 봅니다.
이번에는 그림이 스크롤 바를 따라 정상적으로 굴러간다. 상식적으로 이런 효과가 우리 뇌의 사유에 부합된다.
그러나 스크롤 시차 효과는 바로 상식에 따라 카드를 내놓지 않는 효과이다. 중점은 다음과 같다.
페이지가 그림이 나타날 위치로 스크롤되면 백그라운드-attachment:fixed의 그림은 페이지의 스크롤을 따라 위아래로 이동하지 않고 뷰포트에 비해 고정되어 있습니다.
자, 우리 다시 한 번 해 봅시다.g-word 내용 블록을 모두 제거하고 백그라운드-attachment:fixed의 배경 블록만 설정하면 어떻게 될까요?

IMG1
IMG2
IMG3

section {
    height: 100vh;
}

.g-img {
    background-image: url(...);
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
}

바로 CSS가 백그라운드-attachment:fixed를 사용하여 스크롤 시차를 실현하는 방식이자 상대적으로 쉬운 방식이다.물론 백그라운드-attachment:fixed 자체의 효과는 스크롤 시차 효과를 실현할 수 있을 뿐만 아니라 합리적으로 운용할 수 있을 뿐만 아니라 다른 많은 재미있는 효과도 실현할 수 있다.
예를 들어 그림 클릭 물결 효과를 실현하고 시차 문자 음영/허영 효과 스크롤
축몽 전단
권리 침해가 있으면 삭제에 연락하세요