CSS에서 시차가 있는 여러 배경 이미지를 만드는 방법은 무엇입니까?

시차 스크롤링은 웹 페이지에 움직임과 깊이감을 더하는 데 자주 사용되는 디자인 기술입니다. 이는 개별 페이지 요소를 다양한 속도로 이동하여 평평한 표면에 깊이가 미치는 영향을 시뮬레이션함으로써 수행됩니다. 이 기술을 구현하는 독특하고 창의적인 방법은 CSS에서 여러 배경 이미지를 활용하는 것입니다. 이 기사에서는 HTML 구조 및 CSS 스타일을 설정하는 데 필요한 단계를 포함하여 CSS에서 여러 배경 이미지로 시차 효과를 만드는 방법을 살펴보겠습니다. 초보자이든 숙련된 프런트 엔드 개발자이든 이 가이드는 놀라운 여러 배경 이미지 시차 효과를 만드는 데 필요한 지식과 도구를 제공합니다.

문법

으아아아

배경 이미지 속성

CSS의 background-image 속성은 하나 이상의 이미지를 HTML 요소의 배경으로 지정하는 데 사용됩니다. 이를 통해 하나 이상의 이미지를 요소의 기반으로 조합할 수 있습니다. 이미지는 요소의 특정 영역에 배치할 수 있고, 가로 또는 세로로 복사하도록 설정할 수 있으며, 요소 전체 또는 일부만 덮도록 크기를 조정할 수도 있습니다.

으아아아

애니메이션 속성

CSS 애니메이션 속성은 JavaScript의 도움 없이 HTML 요소에 애니메이션을 만드는 기능을 제공합니다. 이 속성을 사용하면 특정 기간 동안 요소를 수정하는 동안 키프레임 시퀀스를 설명할 수 있습니다. 이러한 키프레임은 다양한 시점의 요소 스타일을 나타내는 데 사용되며, 애니메이션 속성은 요소가 한 키프레임에서 다른 키프레임으로 전환되는 방식을 제어합니다.

애니메이션 속성의 각 구성 요소에 대한 간략한 설명은 다음과 같습니다 -

• name - @keyframes 규칙에서 참조하는 데 사용되는 애니메이션의 명명법입니다.

• Duration - 애니메이션이 지속되어야 하는 기간을 나타내는 애니메이션 지속 시간(초)은 시간 문자열 값(예: "5s")을 사용하여 표현됩니다.

• 타이밍 기능 − 애니메이션의 속도 궤적은 선형,이지 인,이지 아웃,이지 인 및이지 아웃 또는 사용자 정의 큐빅 베지어 기능을 통해 제어할 수 있습니다.

• Delay − 애니메이션을 시작하기 전의 지연 시간으로, 초 단위로 측정됩니다(예: "2초").

• Iteration-count - 애니메이션이 수행해야 하는 반복 횟수 또는 "무한"이라는 용어는 애니메이션이 무한히 계속 반복되어야 함을 의미합니다.

• 방향 - 애니메이션의 궤적은 "정상"(일반적인 방향), "역방향"(반대 방향) 또는 앞뒤로 번갈아가는 "대체"일 수 있습니다.

• Fill Mode - 애니메이션의 비작동 상태를 만족시키는 방법을 지정합니다. 옵션에는 "없음", "앞으로", "뒤로" 또는 "모두"가 포함됩니다.

• Play-state - 각각 "실행 중" 또는 "일시 중지" 값으로 표시되는 애니메이션이 동작 중인지 일시 중지되었는지 여부를 나타냅니다.

  리>

방법

• 여러 배경 이미지를 사용하여 CSS에서 시차 효과를 만들려면 일련의 지침을 따라야 합니다 −

• 환경 묘사가 포함된 구성 요소를 제공합니다. 현재의 경우 구성 요소는 parallax-container라는 라벨이 붙은 div입니다.

• 컨테이너 요소의 높이와 너비를 정의하고 오버플로 속성을 숨김으로 설정하세요. 이렇게 하면 이미지의 보이는 부분만 표시됩니다. 또한 배경 이미지의 위치가 컨테이너를 기준으로 하도록 위치 속성이 상대적으로 설정됩니다.

• 각 배경 이미지마다 별도의 요소를 만들고 위치를 절대 위치로 설정하세요. 이를 통해 각 이미지를 컨테이너 요소 내에 정확하게 배치할 수 있습니다. 각 요소의 높이와 너비는 전체 컨테이너를 채우도록 100%로 설정됩니다.

• background-image 속성을 사용하여 각 요소의 배경 이미지를 설정하세요. 각 개별 이미지에 대해 정확한 파일 경로를 제공해야 합니다.

• X축을 따라 배경 이미지를 이동하려면 각 요소에 대한 애니메이션을 만드세요. 이는 @keyframes 규칙과 함께 애니메이션 속성을 사용하여 수행됩니다. TranslateX 속성은 요소를 이동하는 데 사용되며 이 속성에 설정한 값에 따라 요소가 수평으로 이동하는 거리가 결정됩니다.

• 부드럽고 지속적인 애니메이션 경험을 유지하기 위해 animation-timing-function 속성에 선형 값이 할당되어 애니메이션이 전체 프로세스에서 일관된 진행을 유지함을 나타냅니다. 또한 animation-iteration-count 속성은 무한 값으로 구성되어 미리 정의된 루프 수 제한 없이 애니메이션이 무한 반복됨을 나타냅니다.

Example

은 다음과 같이 번역됩니다.

Example

이 예에서 살펴볼 전체 코드는 다음과 같습니다. -

으아아아

결론

요약하자면 CSS에서 다층 배경 이미지 시차 효과를 생성하는 것은 웹 사이트에 차원과 애니메이션을 도입하는 간단하면서도 강력한 기술입니다. 이 지침에 설명된 지침을 따르면 청중에게 오랫동안 기억될 시각적으로 즐겁고 매력적인 경험을 제공할 수 있습니다. 원하는 디자인이 기본적이든 복잡하든 관계없이 CSS의 유연성을 통해 고유한 전제 조건에 맞게 디자인을 사용자 정의할 수 있습니다. 그렇다면 디자인의 잠재력을 탐구하고 놀라운 결과를 얻기 위한 이 여정에 참여해 보는 것은 어떨까요?

위 내용은 CSS에서 시차가 있는 여러 배경 이미지를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!