이 이미지 효과는 어떻게 만들어지나요?

StackOverflow https://stackoverflow.com/questions/2419523

  •  19-09-2019
  •  | 
  •  

문제

나는 한동안 이 페이지를 살펴보았습니다.정말 놀랍습니다.하지만 스크롤 시 발생하는 배경 이미지 효과가 어떻게 작동하는지 알 수 없습니다.코드를 살펴보니 Jquery와 여러 스크롤 플러그인을 사용하고 있지만 내가 볼 수 있는 이미지에 대해서는 아무것도 없습니다.

그것이 끝났다고 어떻게 말하겠습니까?

사이트: http://herohousing.org/UBBT/

도움이 되었습니까?

해결책

이 트릭은 매우 간단하며 각 패널에 고정된 배경 이미지가 있는 CSS가 필요합니다.

<style type="text/css">
    div {
        height: 100%;
        background-image: url(http://sstatic.net/so/img/logo.png);
        background-attachment: fixed;
        border: thin solid;
    }
    div.a {
        background-repeat: repeat-x;
        background-color: #FDD;
    }
    div.b {
        background-repeat: repeat-y;
        background-color: #DFD;
    }
    div.c {
        background-repeat: no-repeat;
        background-color: #DDF;
    }
</style>

<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>

여기서는 동일한 배경 이미지를 사용하고 있지만 배경 색상과 이미지 반복이 다르기 때문에 세 가지 다른 요소라는 것을 알 수 있습니다.

편집하다좋아, 일부 사람들은 내가 쓰고 있는 내용을 의심하는 것 같습니다.그리고 실제로 인용된 사이트에서는 이를 위해 jQuery를 사용합니다.하지만 아직 배경 이미지의 크기를 조정할 수 없기 때문에 이미지를 브라우저 뷰포트의 너비와 높이에 맞추는 것뿐입니다.CSS 3은 다음을 지정합니다. background-size 재산 하지만 해당 지원은 여전히 ​​다음과 같은 공급업체별 접두사를 사용하여 독점적입니다. -khtml- (정복자), -moz- (Firefox와 같은 Gecko 기반 브라우저) -o- (오페라) 그리고 -webkit- (Safari와 같은 WebKit 기반 브라우저).

그것을 삼갈 수 있다면 제가 보여드린 CSS 기술을 사용할 수 있습니다.

다른 팁

각각의 배경 이미지가 다른 4 개의 div입니다. 효과가 특히 잘 작동하는 것은 "백그라운드 족장 : 고정"입니다. 배경 스크롤을 중지하는 속성.

Firefox 용 FireBug를 다운로드하면 DIV를 검사하고 CSS가 페이지를 작동시키는 방법을 관찰하고 직접 복제하려고 시도 할 수 있습니다.

정말 멋져 보이는 효과 나는 인정해야합니다 :-)

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top