[CSS] Raise the Curtains
7282 ワード
Raise the Curtains
転がる背景が暗から光に変わり、上の内容もsticky positionの場合、光から暗に変わる効果です.
HTMLとCSSのみで実現します.
HTML
<div class="curtain">
<div class="invert">
<h2>Curtain Effect</h2>
</div>
</div>
Set up some CSS variables
css変数を作成し、必要に応じて簡単に変更できるように設定します.
:root {
--minh: 98vh;
--color1: wheat;
--color2: midnightblue;
}
.Curtain Draw
.curtain {
/** create the "split" background **/
background-image: linear-gradient(to bottom,
var(--color2) 50%, var(--color1) 50%);
}
/** add extra space to the bottom
(need this for the "sticky" effect) **/
.curtain::after {
content: "";
display: block;
min-height: var(--minh);
}
Making sticky content
.invert {
/** make the content sticky **/
position: sticky;
top: 20px;
/** blend the content with the contrast effect **/
mix-blend-mode: difference;
/** center the content **/
display: flex;
align-items: center;
justify-content: center;
/** set the minimum height of the section **/
min-height: var(--minh);
}
h2 {
/** set the color of the text **/
color: var(--color1);
}
mix-blend-mode: difference ?
これはCSSを用いてテキスト色を簡単に反転させる方法である.
値をdifference(difference)に設定すると、下敷き要素とは反対の色を表示できます.
コメントサイト
“Raise the Curtains” Demo
REFERENCE
Reference
この問題について([CSS] Raise the Curtains), 我々は、より多くの情報をここで見つけました https://velog.io/@godud2604/CSS-Raise-the-Curtains-o1cufsanテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol