+201223538180

Web site Developer I Advertising and marketing I Social Media Advertising and marketing I Content material Creators I Branding Creators I Administration I System SolutionHow to Make a “Elevate the Curtains” Impact in CSS | CSS-Tips

Web site Developer I Advertising and marketing I Social Media Advertising and marketing I Content material Creators I Branding Creators I Administration I System SolutionHow to Make a “Elevate the Curtains” Impact in CSS | CSS-Tips

Web site Developer I Advertising and marketing I Social Media Advertising and marketing I Content material Creators I Branding Creators I Administration I System Resolution

“Elevate the curtains” is what I name an impact the place the background goes from darkish to mild on scroll, and the content material on high additionally goes from mild to darkish whereas in a sticky place.

Right here’s an instance the place I used the impact on a real-life mission:

Wish to know the way it’s finished? I’ll take you backstage and present you methods to increase it, with nothing however HTML and CSS.

Let’s begin with the HTML

What we’re making is kind of a simplified “increase the curtain” impact like this:

Showing the raise the curtains effect from dark blue to wheat.
The background and textual content each change shade whereas scrolling over the component.

I’m holding issues easy for the sake of readability, however we are able to stub this out with three components:

<div class="curtain">
  <div class="invert">
    <h2>Part title</h2>
  </div>
</div>

First, we want a container for the curtain, which we’ll give a .curtain class. Then, contained in the .curtain, we have now the an .invert little one component that may function our “sticky” field. And, lastly, we have now the content material inside this field — old style <h2> component for this particular instance.

Let’s arrange some CSS variables

There are three values we all know we’ll want upfront. Let’s make CSS variables out of them so it’s simple to write down them into our kinds and simply change them later if we have to.

  • --minh – The peak of the container
  • --color1 – The sunshine shade
  • --color2 – The darkish shade
:root {
  --minh: 98vh;
  --color1: wheat;
  --color2: midnightblue;
}

Time to attract the curtain

Subsequent, we are able to outline our .curtain component utilizing the next strategies:

  • A linear-gradient for the “break up” background
  • min-height for the additional house on the backside of the container

We use the ::after pseudo-element so as to add the additional house to the underside. This manner, our “sticky” content material will really keep on with the container whereas scrolling previous the ::after component. It’s an phantasm.

.curtain {
  /** create the "break up" background **/
  background-image: linear-gradient(to backside, var(--color2) 50%, var(--color1) 50%);
}

/** add additional house to the underside (want this for the "sticky" impact) **/
.curtain::after {
  content material: "";
  show: block;
  min-height: var(--minh);
}

Making sticky content material

Subsequent up, we have to make our content material “sticky” within the sense that it sits completely contained in the container because the background and textual content swap shade values. In truth, we already gave the .curtain‘s little one component an .invert class that we are able to use because the sticky container.

Stick with me for a second — right here’s how that is going to play out:

  • place: sticky and high outline the stickiness and the place it sticks.
  • mix-blend-mode: distinction blends the colour of the content material contained in the <h2> component into the .curtain‘s background gradient.
  • show: flex facilities the content material for presentation.
  • min-height defines the peak of the container and permits for the additional house on the backside.
  • shade units the colour of the h2 heading.

Now to place that into CSS code!

.invert {
  /** make the content material sticky **/
  place: sticky;
  high: 20px;

  /** mix the content material with the distinction impact **/
  mix-blend-mode: distinction;

  /** middle the content material **/
  show: flex;
  align-items: middle;
  justify-content: middle;
  
  /** set the minimal top of the part **/
  min-height: var(--minh);
}

h2 {
  /** set the colour of the textual content **/
  shade: var(--color1);
}

There are various issues happening right here, so let’s clarify every considered one of them.

First, we have now a sticky place that’s self-explanatory and flexbox to assist middle the content material. Nothing new or significantly tough about this.

The content material’s top is ready utilizing CSS variable and the worth is identical top worth because the .curtain::after pseudo-element.

The mix-blend-mode: distinction declaration blends our content material with the background. The distinction worth is difficult, however you would possibly visualize it like inverted textual content shade towards the background. Right here’s a pleasant demo from the CSS-Tips Almanac displaying off the completely different mix-blend-mode values:

To make the mixing work, we have to set the colour of our heading. On this case, we’re assigning a light-weight shade worth (wheat) to the --color1 variable.

“Elevate the Curtains” Demo

Gotchas

I skilled just a few issues whereas figuring out the main points of the “increase the curtain” impact. If you wish to add pictures to the “sticky” content material, for instance, keep away from utilizing pictures that don’t look good when their colours are inverted. Right here’s a fast demo the place I made a easy SVG and clear PNG picture, and it appears good.

One other gotcha: there’s no option to set mix-blend-mode: distinction on particular little one components, like headings, whereas avoiding the impact on pictures. I found there are a number of the explanation why it doesn’t work, the primary of which is that place: sticky cancels the mixing.

The identical goes when utilizing one thing like rework: skewY on the container so as to add a little bit “tilt” to issues. I believe different properties don’t play nicely with the mixing, however I didn’t go that far to search out out which of them.

Right here’s the demo with out scrolling that removes the troubling properties:

Curtain name!

I loved constructing this element, and I all the time adore it after I can accomplish one thing utilizing solely HTML and CSS, particularly after they work easily on each browser.

What’s going to make with it? Is there a distinct approach you’ll method a “increase the curtain” impact like this? Let me know within the feedback!

Supply hyperlink

Leave a Reply