Detect when components overlap with CSS

The issue

I’m engaged on a portfolio web site and stumbled upon an attention-grabbing query: can I detect when a component hits or collides with one other? The preliminary reply behind my head is not any! It’s not potential.

Right here is an summary model of the issue.

I wish to know when the ornamental ingredient hits the part from the left edge, taking into account that the ingredient may need a fluid place or dimension(adjustments with viewport or container dimension).

In brief, it’s a dynamic downside. It’s not about utilizing a media question to cover the ornamental ingredient. I wish to cover it upon overlapping.

Here’s a determine that reveals what I would like. The concept is that I wish to measure the house, and if it’s lower than a specified quantity, it must be hidden.

After this level, the ornamental ingredient must be hidden.

Let’s remedy it

The demos on this article work in browsers that help each scroll-driven animations and anchor positioning.

Right here is the demo. Resize and see how the ornamental ingredient overlaps the playing cards.

Dried cranberry chocolate cookies

A step-by-step information on the right way to make the most effective cookies at house.

Part title

Some textual content in right here to imitate nothing, only for enjoyable.

Part title

Some textual content in right here to imitate nothing, only for enjoyable.

Part title

Some textual content in right here to imitate nothing, only for enjoyable.

First, I considered measuring the house between the part and the ornamental ingredient. To try this, I’ll use CSS anchor positioning.

Utilizing anchor positioning

I wish to create a component that might be tied to:

• The appropriate fringe of the ornamental ingredient.
• The left fringe of the part container.

That ingredient is the house between each.

.decor {
  anchor-name: --line;
}

.part {
  anchor-name: --section;
}

.measure {
  place: absolute;
  left: anchor(--line proper);
  proper: anchor(--section left);
  prime: anchor(--line prime);
  backside: anchor(--line backside);
}

Resize the container under to see how the highlighted house will change.

Dried cranberry chocolate cookies

A step-by-step information on the right way to make the most effective cookies at house.

Part title

Some textual content in right here to imitate nothing, only for enjoyable.

Part title

Some textual content in right here to imitate nothing, only for enjoyable.

Part title

Some textual content in right here to imitate nothing, only for enjoyable.

Now the query is, the right way to use the measured house to do issues like hiding the ornamental ingredient?

Introducing timeline-scope

In scroll-driven animations, we are able to outline a timeline scope. In brief, it permits us to broaden the scope of a scroll animation to outer containers.

Within the following demo, which is impressed by MDN, scrolling the field with textual content will set off the animation on the opposite field.

It’s like connecting a component to a different.

scroll-timeline: --box;

animation: reveal 1ms linear;
animation-timeline: --box;

Right here is the CSS for the 2 bins:

.section-item-left {
  scroll-timeline: --box;
}

.section-item-right {
  animation: reveal 1ms linear;
  animation-timeline: --box;
}

This alone gained’t work, as --box is barely accessible to components inside .section-item-left. To make it so, we have to raise the scope as much as its mother or father by utilizing timeline-scope.

.part {
  timeline-scope: --box;
}

By defining the scope, we are able to entry the --box timeline anyplace throughout the .part container.

However what does that imply for our case? Let’s discover out.

The measure ingredient

Within the measure ingredient, I added a pseudo-element with a width of 20px. Additionally, I outlined overflow-x: auto to make it scrollable.

.measure {
  overflow-x: auto;
}

.measure:after {
  content material: "";
  show: block;
  width: 20px;
  top: 100%;
  background-color: deeppink;
}

The aim of utilizing a fixed-width pseudo-element is to make the .measure ingredient overflow. When the house is lower than 20px, it should overflow (grow to be scrollable).

However how is that this associated to our downside? Within the following demo, we have now the measure ingredient together with the pseudo-element I added.

Resize the container and see how the measure ingredient’s width shrinks till it’s equal to or lower than the pseudo-element.

Dried cranberry chocolate cookies

A step-by-step information on the right way to make the most effective cookies at house.

Part title

Some textual content in right here to imitate nothing, only for enjoyable.

Part title

Some textual content in right here to imitate nothing, only for enjoyable.

Part title

Some textual content in right here to imitate nothing, only for enjoyable.

If you happen to weren’t capable of resize to the precise level, right here is the demo resized for you. Now the .measure ingredient overflow kicks in. You possibly can even scroll in that tiny house!

Dried cranberry chocolate cookies

A step-by-step information on the right way to make the most effective cookies at house.

Part title

Some textual content in right here to imitate nothing, only for enjoyable.

Part title

Some textual content in right here to imitate nothing, only for enjoyable.

Part title

Some textual content in right here to imitate nothing, only for enjoyable.

Maintain that in thoughts, and let’s return to the timeline scope demo for a bit. Within the timeline scope demo, should you scroll on the left field, the opposite field will animate.

As a substitute of animating the fitting field, I wish to change a CSS variable. Within the demo under, attempt including extra content material till the blue-ish part overflows. Upon that, the fitting field’s background will change.

The animation right here is to simply flip a variable. I say animation nevertheless it’s not likely an animation, .

Right here is the CSS:

.part {
  --bg-color: lightgrey;
  timeline-scope: --bg;
}

.box-left {
  scroll-timeline: --bg;
}

.box-right {
  background-color: var(--bg-color);
  animation: change-bg 1ms linear;
  animation-timeline: --bg;
}

@keyframes change-bg {
  from, to {
    --bg-color: hsl(from deeppink h s calc(l + 30));
  }
}

The takeaway right here is that we don’t need to scroll with the intention to set off the animation. We simply must have extra content material for a container to overflow.

Because of this I’ve the identical worth for the from and to values. I don’t care in regards to the progress right here. I simply wish to flip the CSS variable the second there may be an overflow.

In our case, the container is the measure ingredient. And it overflows when there may be not sufficient house for the pseudo-element inside it.

physique {
  --touching: 0;
  timeline-scope: --touch;
  animation: flip-touch 1ms linear;
  animation-timeline: --touch;
}

.measure {
  scroll-timeline: --touch x;
}

@keyframes flip-touch {
  from, to {
    --touching: 1;
  }
}

With that, I listened for when there may be an overflow within the measure ingredient, then used model container queries to vary the opacity of the ornamental ingredient.

.decor {
  @container model(--touching: 1) {
    opacity: 0;
  }
}

Dried cranberry chocolate cookies

A step-by-step information on the right way to make the most effective cookies at house.

Part title

Some textual content in right here to imitate nothing, only for enjoyable.

Part title

Some textual content in right here to imitate nothing, only for enjoyable.

Part title

Some textual content in right here to imitate nothing, only for enjoyable.

That’s it. I didn’t anticipate to unravel it with CSS, however right here we go. Even when this isn’t supported in all browser, I can use it as an enhancement for the undertaking I’m engaged on. Generally, it’s important to go to the additional mile, it’d work.

Credit

This resolution wouldn’t have been simple to do with out the nice work by Bramus on scroll-driven animations. I constructed my resolution on prime of it.

The Format Maestro

Constructing layouts generally is a difficult job, particularly should you don’t know the core psychological mannequin of CSS layouts. You don’t have to fret about that anymore. I launched an interactive CSS format course, and I known as it The Format Maestro.

Try The Format Maestro course and degree up your CSS format abilities.