목차
二、CSS 实现原理
三、CSS 具体实现
四、更柔和的阴影
五、总结和展望
웹 프론트엔드 CSS 튜토리얼 순수 CSS를 사용하여 스크롤 시 머리 그림자를 자동으로 추가하는 방법

순수 CSS를 사용하여 스크롤 시 머리 그림자를 자동으로 추가하는 방법

Jul 12, 2022 am 11:17 AM
css

순수한 CSS를 사용스크롤에 머리 그림자를 자동으로 추가하는 방법은 무엇입니까? 다음 기사에서는 CSS 수준에 대한 몇 가지 팁을 소개합니다! 스크롤할 때 자동으로 머리 그림자를 추가하는 방법을 살펴보세요. 도움이 되기를 바랍니다!

순수 CSS를 사용하여 스크롤 시 머리 그림자를 자동으로 추가하는 방법

웹 페이지에서 그림자는 계층적 관계, 특히 상단 탐색을 강조하는 데 자주 사용됩니다. 그러나 때로는 디자인이 처음에 그림자를 표시할 필요가 없고 스크롤한 후에만 나타나는 경우도 있습니다. 예를 들어, 아래 예에서는 머리 그림자에 주의하세요. [추천 학습: css 동영상 튜토리얼]

순수 CSS를 사용하여 스크롤 시 머리 그림자를 자동으로 추가하는 방법

스크롤을 해야만 그림자가 나타나는 것을 볼 수 있습니다. 일반적인 상황에서는 JS를 사용하여 스크롤 이벤트를 수신하고 클래스 이름을 동적으로 추가하면 이 효과를 얻을 수 있습니다. 그러나 몇 번 시도한 후에 구현 효과는 다음과 같습니다.

순수 CSS를 사용하여 스크롤 시 머리 그림자를 자동으로 추가하는 방법또한 CSS 자동 헤더 섀도우(codepen.io)

를 미리 방문하여 실제 효과를 확인할 수도 있습니다. 어떻게 구현하는지 2분정도 보시고~

1. 헤드 위치 고정

이런 레이아웃이 있다고 가정해보세요
<header>LOGO</header>
<main>很多内容文本</main>
로그인 후 복사

간편히 수정해 보세요

header{
  background: #fff;
  font-size: 20px;
  padding: 10px;
}
로그인 후 복사
헤드를 수정하는 방법은 여러가지가 있으니 비교해보세요 고정 위치 지정을 사용하는 것이 일반적입니다

header{
  position: fixed;
  top: 0
}
로그인 후 복사
하지만 고정 위치 지정은 공간을 차지하지 않고 콘텐츠 영역이 가려지는 원인이 되므로 일반적으로 부품 예약이 필요합니다 , 이렇게

main{
  margin-top: 头部的高度
}
로그인 후 복사
fixed定位
header{
  position: sticky;
  top: 0
}
로그인 후 복사

但是,fixed定位是不占空间的,会导致遮挡内容区域,所以一般还需要预留头部一部分空间出来,比如这样

<header>LOGO</header>
<shadow></shadow>
<main>很多内容文本</main>
로그인 후 복사
로그인 후 복사
로그인 후 복사

在这里,我更推荐使用sticky定位,在吸顶的同时,还能保留原有的占位

shadow::before{
  content: '';
  box-shadow: 0 0 10px 1px #333;
  position: fixed; /*无需 top 值*/
  width: 100%;
}
로그인 후 복사

效果如下,只是没有阴影

순수 CSS를 사용하여 스크롤 시 머리 그림자를 자동으로 추가하는 방법

二、CSS 实现原理

实现这个效果,需要一点点“CSS 障眼法”。假设有一层阴影,在默认情况下用一个元素遮挡起来,以下都称之为“遮挡物”。这里需要考虑好各个部分的순수 CSS를 사용하여 스크롤 시 머리 그림자를 자동으로 추가하는 방법,稍微有些复杂,如下所示(侧面순수 CSS를 사용하여 스크롤 시 머리 그림자를 자동으로 추가하는 방법图)

순수 CSS를 사용하여 스크롤 시 머리 그림자를 자동으로 추가하는 방법

순수 CSS를 사용하여 스크롤 시 머리 그림자를 자동으로 추가하는 방법为: 头部 > 遮挡物 > 阴影 > 内容

在滚动过程中,阴影就自动就可见了,遮挡物正好又会被头部遮住,注意,遮挡物和内容是一起滚动的,动态演示如下

Kapture 2022-06-19 at 15.04.34.gif

原理就是这样,下面看具体实现

三、CSS 具体实现

根据以上原理,这里需要添加一个元素,阴影和遮挡物都可以用伪元素生成

shadow::after{
  content: '';
  width: 100%;
  height: 15px;
  background: #fff;
  position: absolute; /*无需 top 值*/
}
로그인 후 복사

这里阴影的位置是固定的,也不需要占据空间,所以可以直接用fixed定位,也可以不设置top值,因为默认就位于非定位时的位置(又体现出 sticky 的好处了),也就是头部下面

header{
  /**/
  z-index: 1;
}
로그인 후 복사
fixed 定位在不设置 top 或者 left 值时,仍然位于原先位置,但是会在这个位置固定下来

遮挡物可以用纯色填充,而且需要跟随内容滚动,也不需要占据空间,同时也为了提升层级,可以设置一个absolute定位

shadow::after{
  height: 30px;
  background: linear-gradient(to bottom, #fff 50% , transparent);
}
로그인 후 복사
로그인 후 복사
absolute여기에서는 sticky 포지셔닝을 사용하는 것이 좋습니다.
천장을 흡수하면서 원래 자리 표시자도 유지할 수 있습니다

header{
  position: sticky;
  background: #fff;
  top: 0;
  font-size: 20px;
  padding: 10px;
  z-index: 1;
}
shadow::before{
  content: '';
  box-shadow: 0 0 10px 1px #333;
  position: fixed;
  width: 100%;
}
shadow::after{
  content: '';
  width: 100%;
  height: 30px;
  background: linear-gradient(to bottom, #fff 50% , transparent);
  position: absolute;
}
로그인 후 복사
로그인 후 복사
효과는 다음과 같습니다. 하지만 그림자는 없습니다

머리 고정 위치 지정

2. CSS 구현 원리

🎜이 효과를 얻으려면 약간의 "CSS 맹목"이 필요합니다. 기본적으로 요소에 의해 차단되는 그림자 레이어가 있다고 가정해 보겠습니다. 이 레이어는 아래에서 "차단기"라고 합니다. 여기에서는 아래와 같이 약간 복잡한 각 부분의 계층적 관계를 고려해야 합니다(측면 계층적 관계 다이어그램) 🎜🎜🎜계층적 관계🎜🎜🎜계층적 관계는 다음과 같습니다: 머리> 폐색자> 그림자> ; 콘텐츠🎜🎜스크롤하는 동안 그림자는 자동으로 표시되며, 장애물과 콘텐츠가 함께 스크롤된다는 점에 유의하세요.🎜🎜🎜2022-06-19 15.04.34에 캡처 .gif🎜🎜🎜원칙은 이렇습니다. 구체적인 구현을 살펴보겠습니다🎜🎜🎜셋, CSS 특정 구현🎜🎜🎜에 따르면 위의 원칙에 따르면 여기에 추가해야 합니다. 의사 요소를 사용하여 요소, 그림자 및 폐색을 생성할 수 있습니다 🎜
<header>LOGO</header>
<shadow></shadow>
<main>很多内容文本</main>
로그인 후 복사
로그인 후 복사
로그인 후 복사
🎜여기서 그림자의 위치는 고정되어 있으며 공간을 차지할 필요가 없으므로 고정된 를 사용하여 직접 위치를 지정할 수 있습니다. 또는 top 값을 설정하지 않고 기본 위치가 위치 지정되지 않은 위치(sticky의 이점을 반영), 즉 머리 아래에 있기 때문입니다 🎜 rrreee🎜fixed 위쪽 또는 왼쪽 값이 설정되지 않은 경우 위치는 여전히 원래 위치에 있지만 이 위치에 고정됩니다🎜🎜장애물을 단색으로 채울 수 있으며, 🎜콘텐츠와 함께 스크롤해야 하고 공간을 차지할 필요가 없으며 레벨을 향상시키기 위한 것이기도 합니다🎜, 절대 위치 지정🎜rrreee🎜절대를 설정할 수 있습니다 > 위치 지정 위쪽 또는 왼쪽 값이 설정되지 않은 경우 여전히 원래 위치에 있으며 콘텐츠와 함께 스크롤됩니다🎜🎜 이제 살펴보겠습니다. 계층적 관계, 🎜머리, 그림자 및 폐색이 모두 위치 지정됩니다🎜. DOM 순서에 따르면 이때 계층 관계 🎜🎜는 occlusion > Shadow > head > content 🎜🎜 머리가 가장 높아야 하므로 레벨을 별도로 변경해야 합니다🎜rrreee🎜 계층 관계는 Head >입니다. ; Occluder > Shadow > Content🎜🎜이렇게 하면 글 시작 부분에 보이는 효과가 나오며, 그 효과는 다음과 같습니다🎜

순수 CSS를 사용하여 스크롤 시 머리 그림자를 자동으로 추가하는 방법

四、更柔和的阴影

其实上面的效果已经很好了,但是稍微有点生硬。仔细观察,在慢慢滚动过程中,阴影有一种“向上推进”的感觉,如下

순수 CSS를 사용하여 스크롤 시 머리 그림자를 자동으로 추가하는 방법

有没有办法让这个过程更柔和一点呢?比如透明度的变化?

当然也是可以的,实现也比较简单。上面比较生硬的原因是,遮挡物是纯色的,如果换成半透明渐变是不是就好一些呢?

shadow::after{
  height: 30px;
  background: linear-gradient(to bottom, #fff 50% , transparent);
}
로그인 후 복사
로그인 후 복사

效果如下

순수 CSS를 사용하여 스크롤 시 머리 그림자를 자동으로 추가하는 방법

这样阴影出现的效果就不再是“向上推进”的效果,你觉得怎么样呢?

重点来了~下面是完整 CSS 代码(20行不到~)

header{
  position: sticky;
  background: #fff;
  top: 0;
  font-size: 20px;
  padding: 10px;
  z-index: 1;
}
shadow::before{
  content: '';
  box-shadow: 0 0 10px 1px #333;
  position: fixed;
  width: 100%;
}
shadow::after{
  content: '';
  width: 100%;
  height: 30px;
  background: linear-gradient(to bottom, #fff 50% , transparent);
  position: absolute;
}
로그인 후 복사
로그인 후 복사

HTML 结构也很简单

<header>LOGO</header>
<shadow></shadow>
<main>很多内容文本</main>
로그인 후 복사
로그인 후 복사
로그인 후 복사

你可以访问在线链接 CSS auto header shadow(codepen.io):

https://codepen.io/xboxyan/pen/yLvdgXw

五、总结和展望

以上就是全部分享内容了,是不是又掌握一个 CSS 小技巧?用到了3个定位属性,几乎零成本,复制几行代码,马上就可以用起来了,下面总结一下实现要点:

  • 固定头部的布局推荐用 sticky 实现,好处是可以保留头部占位,无需额外预留

  • 整体实现思路是CSS 障眼法和 CSS 层级,相互遮挡

  • fixed 定位在不设置 top 或者 left 值时,仍然位于原先位置,但是会在这个位置固定下来

  • absolute定位在不设置 top 或者 left 值时,仍然位于原先位置,也会跟随内容滚动

  • 纯色遮挡在滚动时有些生硬,半透明渐变遮挡在滚动时会更加柔和

在未来,像这类滚动相关的交互都可以通过@scroll-timeline来实现,有兴趣的可以提前了解这方面内容,只是现在几乎不可实际生产使用(目前需要手动开启实验特性),可以预料,随着 CSS 新特性的不断发展,像这类“CSS 奇技淫巧”肯定会被官方逐步替代,体验也会更加完善,但并,并不是说这些思考是无用了,实际需求千千万,官方不可能一一照顾到,就算有规划,有草案,可能已经是多年以后了,所以学习 CSS 一定不要停止思考,停止想象,这大概也是 CSS 比较有趣的地方吧~

(学习视频分享:web前端入门

위 내용은 순수 CSS를 사용하여 스크롤 시 머리 그림자를 자동으로 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

vue에서 자리 표시자는 무엇을 의미합니까? vue에서 자리 표시자는 무엇을 의미합니까? May 07, 2024 am 09:57 AM

Vue.js에서 placeholder 속성은 사용자가 콘텐츠를 입력하지 않을 때 표시되는 입력 요소의 자리 표시자 텍스트를 지정하고 입력 팁이나 예제를 제공하며 양식 접근성을 향상시킵니다. 사용법은 입력 요소에 자리 표시자 속성을 설정하고 CSS를 사용하여 모양을 사용자 정의하는 것입니다. 모범 사례에는 입력과 관련성, 짧고 명확함, 기본 텍스트 방지, 접근성 고려 등이 포함됩니다.

js에서 스팬은 무엇을 의미하나요? js에서 스팬은 무엇을 의미하나요? May 06, 2024 am 11:42 AM

스팬 태그는 텍스트에 스타일, 속성 또는 동작을 추가할 수 있습니다. 색상 및 글꼴 크기와 같은 스타일을 추가하는 데 사용됩니다. ID, 클래스 등의 속성을 설정합니다. 클릭, 호버 등과 같은 관련 동작 추가 처리 또는 인용을 위해 텍스트를 표시합니다.

js에서 rem은 무엇을 의미합니까? js에서 rem은 무엇을 의미합니까? May 06, 2024 am 11:30 AM

CSS의 REM은 루트 요소(html)의 글꼴 크기에 상대적인 단위입니다. 여기에는 다음과 같은 특징이 있습니다. 루트 요소의 글꼴 크기를 기준으로 하며 상위 요소의 영향을 받지 않습니다. 루트 요소의 글꼴 크기가 변경되면 REM을 사용하는 요소가 그에 따라 조정됩니다. 모든 CSS 속성과 함께 사용할 수 있습니다. REM 사용의 장점은 다음과 같습니다. 반응성: 다양한 장치 및 화면 크기에서 텍스트를 읽을 수 있도록 유지합니다. 일관성: 웹사이트 전체에서 글꼴 크기가 일관되게 유지되어야 합니다. 확장성: 루트 요소 글꼴 크기를 조정하여 전역 글꼴 크기를 쉽게 변경할 수 있습니다.

Vue에 이미지를 삽입하는 방법 Vue에 이미지를 삽입하는 방법 May 02, 2024 pm 10:48 PM

Vue에 이미지를 도입하는 방법에는 URL, 필수 함수, 정적 파일, v-bind 지시어 및 CSS 배경 이미지 등 5가지 방법이 있습니다. 동적 이미지는 Vue의 계산된 속성이나 리스너에서 처리할 수 있으며, 번들 도구를 사용하여 이미지 로딩을 최적화할 수 있습니다. 경로가 올바른지 확인하세요. 그렇지 않으면 로딩 오류가 나타납니다.

js의 노드 란 무엇입니까? js의 노드 란 무엇입니까? May 07, 2024 pm 09:06 PM

노드는 HTML 요소를 나타내는 JavaScript DOM의 엔터티입니다. 이는 페이지의 특정 요소를 나타내며 해당 요소에 액세스하고 조작하는 데 사용될 수 있습니다. 일반적인 노드 유형에는 요소 노드, 텍스트 노드, 주석 노드 및 문서 노드가 포함됩니다. getElementById()와 같은 DOM 메서드를 통해 노드에 액세스하고 속성 수정, 하위 노드 추가/제거, 노드 삽입/교체, 노드 복제 등의 작업을 수행할 수 있습니다. 노드 순회는 DOM 구조 내에서 탐색하는 데 도움이 됩니다. 노드는 페이지 콘텐츠, 이벤트 처리, 애니메이션 및 데이터 바인딩을 동적으로 생성하는 데 유용합니다.

브라우저 플러그인은 어떤 언어로 작성되어 있나요? 브라우저 플러그인은 어떤 언어로 작성되어 있나요? May 08, 2024 pm 09:36 PM

브라우저 플러그인은 일반적으로 다음 언어로 작성됩니다. 프런트엔드 언어: JavaScript, HTML, CSS 백엔드 언어: C++, Rust, WebAssembly 기타 언어: Python, Java

알 수 없는 속성을 설정하기 위해 vscode vscode 메소드에서 알 수 없는 속성을 설정하는 방법 알 수 없는 속성을 설정하기 위해 vscode vscode 메소드에서 알 수 없는 속성을 설정하는 방법 May 09, 2024 pm 02:43 PM

1. 먼저 왼쪽 하단에 있는 설정 아이콘을 열고 설정 옵션을 클릭합니다. 2. 그런 다음 점프된 창에서 CSS 열을 찾습니다. 3. 마지막으로 알 수 없는 속성 메뉴의 드롭다운 옵션을 오류 버튼으로 변경합니다. .

vue의 ref와 id는 무엇을 합니까? vue의 ref와 id는 무엇을 합니까? May 02, 2024 pm 08:42 PM

Vue.js에서 ref는 JavaScript에서 DOM 요소(하위 구성 요소 및 DOM 요소 자체에 액세스 가능)를 참조하는 데 사용되는 반면 id는 HTML id 속성(CSS 스타일, HTML 마크업 및 JavaScript 조회에 사용할 수 있음)을 설정하는 데 사용됩니다. ).

See all articles