You are viewing a degraded version of this page. Please use a supported browser for the best reading experience.

Dimmer

Turning out the lights

Codex was built with the premise that stories don’t have to be one kind of media. They don’t have to be video stories or photo galleries or podcasts or just writing but mixes of all of the formats. However, it can be awkward to make the transition between sections with various types of content. The dimmer effect can help aide these transitions.

Keep scrolling to see the effect.

Simple, but effective.

To use this in your own stories, you can add fx/dimmer to your article’s assets and then use the dimmer class on anything you want to isolate. You’ll of course want to make sure the isolated thing has nothing to either side of it as this will be obscured as you scroll.

There are two classes that let you customize this behavior. The .background class will fade to the background color of the page, so the effect is more like everything else is fading away.

The .tight class limits the range where the mask fades in. Normally, anytime the target is crossing the center of the screen the mask will be at 100% opacity. With .tight, it must be centered on the middle of the screen.

You can of course also customize the mask that creates the effect in CSS, changing it to any color you like or perhaps disabling it at certain window sizes.


/* make the mask a pleasing pastel purple */
.dimmer-mask {
  color: hsl(272, 100%, 84%)
}

/* hide it on big screens */
@media (min-width: 800px) {
  .dimmer-mask {
    display: none;
  }
}