Image Fragmentation Effect With CSS Masks and Custom Properties

CSS Masks and @property: Creating Stunning Image Fragmentation Effects

Geoff's checkerboard animation, revealing an image tile by tile, inspired a different approach: starting with a fully visible image and making it disappear piece by piece, like fragments floating away. This effect is achieved using only CSS, specifically CSS masks, @property, and a touch of SCSS for efficient code generation. This technique requires Chrome, Edge, or Opera due to their current exclusive support for @property.

The core concept leverages CSS masks, which, unlike clipping, are essentially images. Transparent areas in the mask allow the underlying element to show through, while opaque areas hide it. This allows for layering multiple masks, similar to background-image, to create complex effects. We use CSS gradients as our mask images.

A simple example illustrates the principle:

img {
  mask:
    linear-gradient(rgba(0,0,0,0.8) 0 0) left,
    linear-gradient(rgba(0,0,0,0.5) 0 0) right;
  mask-size: 50% 100%;
  mask-repeat: no-repeat;
}

Two mask layers, with varying alpha values, cover the image. The color is irrelevant; only the alpha value matters (due to the default mask-mode: alpha).

Animating these gradients requires @property, a relatively new CSS feature. It allows creating custom properties with defined syntax and types, enabling gradient animation. We define two properties, --c-0 and --c-1, representing alpha values:

@property --c-0 {
   syntax: "<number>";
   initial-value: 1;
   inherits: false;
}
@property --c-1 {
   syntax: "<number>";
   initial-value: 1;
   inherits: false;
}</number></number>

These are used in the mask:

img {
  mask:
    linear-gradient(rgba(0,0,0,var(--c-0)) 0 0) left,
    linear-gradient(rgba(0,0,0,var(--c-1)) 0 0) right;
  mask-size: 50% 100%;
  mask-repeat: no-repeat;
  transition: --c-0 0.5s, --c-1 0.3s 0.4s;
}

img:hover {
  --c-0: 0;
  --c-1: 0;
}

Hovering the image triggers a staggered fade-out effect due to different transition durations and delays.

To achieve the fragmentation effect, we need many more tiles (gradients and properties). SCSS simplifies this:

$x: 10; // Number of columns
$y: 10; // Number of rows
$s: 0.5s; // Base transition speed
$o: 1; //Overlap factor

@for $i from 0 through ($x - 1) {
  @for $j from 0 through ($y - 1) {
    @property --c-#{$i}-#{$j} {
      syntax: "<number>";
      initial-value: 1;
      inherits: false;
    }
  }
}

@mixin image() {
  $all_t: ();
  $all_m: ();
  @for $i from 0 through ($x - 1) {
    @for $j from 0 through ($y - 1) {
      $all_t: append($all_t, --c-#{$i}-#{$j} transition($i,$j), comma);
      $all_m: append($all_m, linear-gradient(rgba(0,0,0,var(--c-#{$i}-#{$j})) 0 0) calc(#{$i}*100%/(#{$x} - 1)) calc(#{$j}*100%/(#{$y} - 1)), comma);
    }
  }
  transition: $all_t;
  mask: $all_m;
  mask-size: calc(#{$o}*100%/#{$x}) calc(#{$o}*100%/#{$y});
}

@function transition($i,$j) {
  @return ($s*random()) s ($s*random()) s; // full random
}

img {
  @include image();
}

img:hover {
  @for $i from 0 through ($x - 1) {
    @for $j from 0 through ($y - 1) {
      --c-#{$i}-#{$j}: 0;
    }
  }
}</number>

This SCSS generates the necessary @property definitions, mask layers, and transitions, allowing for customization of animation speed, tile size, and overlap using variables. Different animation patterns can be achieved by modifying the transition() function. Experimenting with radial gradients instead of linear gradients and adjusting the overlap factor ($o) further expands the creative possibilities. The result is a highly customizable and visually striking image fragmentation effect using only CSS and SCSS.

The above is the detailed content of Image Fragmentation Effect With CSS Masks and Custom Properties. For more information, please follow other related articles on the PHP Chinese website!