This Banner is For Sale !!
Get your ad here for a week in 20$ only and get upto 15k traffic Daily!!!

How to Make a “Raise the Curtains” Effect in CSS | Style-Tricks


“Increase the curtains” is what I name an impact the place the background goes from darkish to mild on scroll, and the content material on prime 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 project:

Wish to know the way it’s carried out? I’ll take you behind the scenes and present you easy methods to elevate it, with nothing however HTML and CSS.

Let’s begin with the HTML

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

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

I’m conserving 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’d like a container for the curtain, which we’ll give a .curtain class. Then, contained in the .curtain, we’ve the an .invert baby factor that can function our “sticky” field. And, lastly, we’ve the content material inside this field — a superb old style <h2> factor 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 types and simply change them later if we have to.

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

Time to attract the curtain

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

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

We use the ::after pseudo-element so as to add the additional area to the underside. This manner, our “sticky” content material will truly stick with the container whereas scrolling previous the ::after factor. It’s an phantasm.

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

/** add further area 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 colour values. Actually, we already gave the .curtain‘s baby factor 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 prime outline the stickiness and the place it sticks.
  • mix-blend-mode: distinction blends the colour of the content material contained in the <h2> factor 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 area on the backside.
  • colour units the colour of the h2 heading.

Now to place that into CSS code!

.invert {
  /** make the content material sticky **/
  place: sticky;
  prime: 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 **/
  colour: var(--color1);
}

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

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

The content material’s top is about utilizing CSS variable and the worth is similar 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 may visualize it like inverted textual content colour in opposition to the background. Right here’s a pleasant demo from the Fashion-Tips Almanac displaying off the totally 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 lightweight colour worth (wheat) to the --color1 variable.

“Increase the Curtains” Demo

Gotchas

I skilled just a few issues whereas figuring out the small print of the “elevate 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 seems to be good.

One other gotcha: there’s no option to set mix-blend-mode: distinction on particular baby components, like headings, whereas avoiding the impact on pictures. I found there are a number of 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 remodel: skewY on the container so as to add a bit “tilt” to issues. I believe different properties don’t play properly with the mixing, however I didn’t go that far to seek out out which of them.

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

Curtain name!

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

What is going to make with it? Is there a special method you’ll method a “elevate the curtain” impact like this? Let me know within the feedback!



Source link

The Article was Inspired from tech community site.
Contact us if this is inspired from your article and we will give you credit for it for serving the community.

This Banner is For Sale !!
Get your ad here for a week in 20$ only and get upto 10k Tech related traffic daily !!!

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to Contribute to us or want to have 15k+ Audience read your Article ? Or Just want to make a strong Backlink?