놀라운 순수 CSS 스크롤 표시기 효과
5969 단어 javascripthtmlcssweb
페이지 스크롤에 따라 길이가 변경되는 상단의 노란색 스크롤 진행률 표시줄입니다.
아래 내용을 계속 읽기 전에 잠시 시간을 할애할 수 있습니다. JavaScript를 사용하지 않고 위의 효과를 능숙하게 얻을 수 있는지 여부에 대해 생각하거나 직접 시도하십시오.
좋아요, 이 효과는 제가 일상적인 개발 과정에서 마주쳤던 비슷한 작은 문제입니다. 사실 자바스크립트를 사용할 수 있다 해도 굉장히 번거롭게 느껴진다. CSS만 사용하여 이러한 효과를 달성할 수 있는지 궁금합니다.
요구 사항 분석
이 효과를 처음 보았을 때 이 스크롤 애니메이션은 페이지의 스크롤 거리 계산과 관련되어 있기 때문에 CSS만으로는 달성할 수 없다고 느꼈습니다.
CSS로만 하고 싶다면 다른 방법을 찾아 영리한 방법을 사용해야 합니다.
글쎄, CSS를 사용하여 몇 가지 트릭과 트릭의 도움을 받아 이 효과를 단계별로 달성해 봅시다. 난이도 분석:
사용자가 현재 페이지를 얼마나 스크롤하고 있는지 확인하고 상단 진행률 표시줄에 알리는 방법은 무엇입니까?
정상적인 분석은 이래야 하는데 이는 전통적 사고에 빠진다. 진행률 표시줄은 페이지의 스크롤 거리를 수신하고 너비를 변경하는 진행률 표시줄입니다. 페이지 스크롤링과 프로그레스 바가 일체형이라면?
요구 사항을 충족
판매하지 말고
linear-gradients를 사용하여 이 기능을 구현합시다.페이지가 로 래핑
<body>되어 있다고 가정하면 전체 본문을 스크롤할 수 있고 왼쪽 아래에서 오른쪽 위로 이 선형 그래디언트를 페이지에 추가할 수 있습니다.body {
background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
background-repeat: no-repeat;
}
그러면 다음과 같은 효과를 얻을 수 있습니다.
와우, 노란색 블록의 색상 변화는 실제로 전반적인 진행 상황을 표현할 수 있습니다. 사실, 여기서 현명한 당신은 이미 다음에 무엇을 해야할지 알고 있어야 합니다.
추가 부분을 다루기 위해 의사 요소를 사용합니다.
body::after {
content: "";
position: fixed;
top: 5px;
left: 0;
bottom: 0;
right: 0;
background: #fff;
z-index: -1;
}
시연을 용이하게 하기 위해 위의 흰색 베이스를 검은색 투명 베이스로 변경했습니다.:
실제 효과는 다음과 같습니다.
신중한 사용자는 페이지가 끝까지 스크롤될 때 진행률 표시줄이 끝나지 않는다는 것을 알 수 있습니다.
그 이유는 선형 그래디언트의 몸체 높이가 전체
body의 크기를 설정하기 때문에 그래디언트의 높이를 조정해 보겠습니다.body {
background-image: linear-gradient(to right top, #ffcc00 50%, #eee 50%);
background-size: 100% calc(100% - 100vh + 5px);
background-repeat: no-repeat;
}
여기서
calc 연산을 하고 뺄셈 100vh 즉, 화면의 높이를 빼서 기울기가 아래로 미끄러질 때 오른쪽 위 모서리에 딱 맞도록 한다.그리고
+ 5px는 스크롤링 진행률 표시줄의 높이이며 5px의 높이를 위해 예약되어 있습니다. 완벽한 효과를 살펴보십시오.지금까지 이 요구 사항은 완벽하게 충족되었습니다. 이는 좋은 트릭이며 완전한 데모입니다.
CodePen Demo -- Using Linear-Gradient Implement Scrolling Indicator Effect
드디어
더 멋진 CSS 기술 문서는 내 문서에 요약되어 있습니다.
Github-iCSS .
자, 이 글은 여기까지 입니다. 도움이 되셨으면 합니다. :)
Reference
이 문제에 관하여(놀라운 순수 CSS 스크롤 표시기 효과), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/chokcoco/amazing-pure-css-scrolling-indicator-effect-5eja텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
