KPR 구절 바닥글 효과 뒤에 숨은 마법 효과를 풀어보세요

KPR-verse 웹사이트를 스크롤하던 중 하단에서 이 멋진 효과를 발견했습니다. 이런거 볼때마다 늘 다시 만들고 싶어지네요. 내 프로세스는 간단합니다. 먼저 효과를 재현한 다음 복잡한 디자인을 이해하기 쉬운 단계로 나누는 것을 목표로 블로그를 만들어 작업 방법을 설명합니다.

처음에는 잘 해낼 수 있을까 하는 의심이 들 때도 있지만, 깊이 고민한 끝에 디자인을 여러 조각으로 쪼개는 방법을 찾는 경우가 많습니다. 그 조각들을 연결함으로써 효과를 얻을 수 있습니다. 이야기는 충분히 마쳤습니다. 직접 만드는 방법을 알아보겠습니다!

KPR 구절 바닥글 효과 분석

사이트 마지막에는 배경에 KPR 배너가 있습니다. 얼핏 보면 조금 복잡해 보일 수도 있지만 그렇게 복잡하지는 않습니다.

먼저 .container 클래스를 사용하여 div를 만듭니다. 이것이 튜토리얼의 루트 요소가 됩니다.

다음으로 .container를 .subcontainer-wrapper와 footer의 두 부분으로 나눕니다. 바닥글 요소에는 KPR 배너가 포함됩니다.

이제 .subcontainer-wrapper를 두 부분으로 더 나눕니다. 위쪽 부분에는 웹 사이트의 모든 콘텐츠가 포함되어 있고 아래쪽 부분은 배경 없이 비어 있습니다. 즉, 본질적으로 보이지는 않지만 여전히 뷰포트의 너비와 높이를 갖습니다. 아래쪽 부분은 바닥글을 볼 수 있기 때문에 중요합니다.

지금까지 모든 요소는 일반적인 HTML 흐름(예: 위에서 아래로)에 있습니다. 이제 바닥글을 뒤에 배치하고 .subcontainer-wrapper를 앞으로 가져와 이 순서를 깨야 합니다. 이를 위해 .subcontainer-wrapper를 상위 .container에 상대적인 위치: 절대값으로 설정합니다. 이렇게 하면 일반 DOM 흐름에서 .subcontainer-wrapper가 제거됩니다.

효과를 설정하는 데 필요한 전부입니다. 이제 .subcontainer-wrapper의 위쪽 부분을 콘텐츠로 채우고 아래쪽 부분(보이지 않는 div)은 비워 둡니다. 그리고 바닥글에 내용을 추가해 보세요.

콘텐츠를 추가하면 다음과 같은 모습이 됩니다.

상단 부분은 배경을 숨기고, 스크롤을 내리다 보면 보이는 내용이 끝나면 보이지 않는 부분에 바닥글이 드러납니다. 짜잔! 이제 간단하고 쉽습니다.

_따라와주셔서 감사합니다! 이 가이드가 도움이 되고 이해하기 쉬웠기를 바랍니다. 호기심을 갖고 계속 탐색해 보세요!

원본: KPR-verse

데모 사이트: Demo Link , 이번 시연에서는 Google I/O 사이트(https://io.google/2024/)를 활용하여 유사한 개념을 선보일 수 있도록 적용했습니다.

소스코드: Github Link_

위 내용은 KPR 구절 바닥글 효과 뒤에 숨은 마법 효과를 풀어보세요의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!